Несколько файлов, составляющих проект типа Script

Недавно я работал с TypeScript, и все было хорошо, и мне действительно нравится это. Делает работу JavaScript снова!:)

мы пытались следовать той же идее, что и за любым проектом .net, например, один файл для каждого класса/интерфейса

module Infrastructure {
    export interface IBaseViewModel {
        addOrRemoveClass(selector: string, className: string);
    }
}

проблема, с которой мы столкнулись, - это все зависимые файлы не включены? когда дело доходит до запуска.

Если вы посмотрите на этот файл, который является основной точкой входа в наше приложение, я получаю ошибку undefined при создании нового ViewModelBuilder

module Infrastructure {
    export class Fusion {
        constructor() {
            this.vmBuilder = new ViewModelBuilder();
            this.setApplicationDefaults();
            this.start();
        }

        private vmBuilder: IViewModelBuilder;

        private start() {
            this.vmBuilder.process();
        }

        private setApplicationDefaults() {
            $.pnotify.defaults.styling = "jqueryui";
            $.pnotify.defaults.history = false;
            $.pnotify.defaults.auto_display = false;
        }
    }
}

и в верхней части файла мы имеем

/// <reference path="../Typings/jquery.d.ts" />
/// <reference path="ViewModelBuilder/ViewModelBuilder.ts" />
/// <reference path="ViewModelBuilder/IViewModelBuilder.ts" />

также ViewModelBuilder

module Infrastructure {

    export class ViewModelBuilder { }
}

Итак, вопрос в том, что такое лучший способ? как мы можем заставить декларации других классов работать? наш проект будет значительно расти, мы, вероятно, будем рассматривать 100 моделей, которые будут представлять каждый вид (проект представляет собой преобразование из окон в веб-страницы)

Любая помощь будет фантастической, так как нам действительно нужно покорить ее и двигаться дальше!:)

Ответ 1

Я написал о правильном настроении для TypeScript, и одна из идей там поможет вам - я изначально получил идею от Марка Рендла.

Идея состоит в том, что создайте файл с именем references.ts и укажите все ваши зависимости, перечисленные там. Немного похоже на это:

/// <reference path="modulea.ts" />
/// <reference path="moduleb.ts" />
/// <reference path="modulec.ts" />
/// <reference path="moduled.ts" />
/// <reference path="modulee.ts" />

Затем вы можете просто ссылаться на этот файл в верхней части всех ваших файлов TypeScript:

/// <reference path="references.ts" />
module ModuleA {
    export class MyClass {
        doSomething() {
            return 'Hello';
        }
        tester() {
            var x = new ModuleB.MyClass();
        }
    }
}

Файл references.ts действует как папка "Ссылки" для .NET-проекта.

Другая рекомендация, которая хорошо работает с этой настройкой, заключается в использовании флага --out для компиляции одного файла JavaScript, начиная с app.ts. Компилятор TypeScript просматривает все зависимости и выдает правильный порядок для всего сгенерированного JavaScript.

tsc --out final.js app.ts

Эта стратегия будет масштабироваться с вашей программой намного лучше, чем вручную ссылаться на определенные файлы во всем мире.

Ответ 2

У вас есть два варианта: commonjs или AMD (загрузка асинхронного модуля).
Используя commonjs, вам нужно будет поместить

<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>

для каждого отдельного файла javascript в вашем проекте на странице html.
Очевидно, это может стать очень утомительным, особенно если у вас есть сотни файлов в вашем проекте.
В качестве альтернативы, как указал Стив Фентон, вы можете использовать параметр -out для компиляции различных файлов в один файл, а затем ссылаться только на один файл на странице html.

Использование AMD - это третий вариант - вам нужно включить только один тег script на странице html, а AMD позаботится о ссылках.
Взгляните на мой блог о том, как это сделать: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/