Typescript - Как разрешать внутренние модули во время выполнения

Мой bootstrapper.ts, который запускается из точки входа main.ts, выглядит так (без заголовка ссылок):

import Dialogs = App.Widgets.Dialogs;
declare var $ : JQueryStatic;


export class Bootstrapper { 
    static SiteLoad() { 
       var dialog = new Dialogs.LoginDialog();
       ...
    }
}

Однако, когда main.ts пытается загрузить этот файл, первая строка немедленно выдает ошибку ссылки. Именно тогда я понял, что импорт внутреннего модуля не добавляет никаких зависимостей к оболочке define сгенерированного файла .js.

Итак, как мне разрешать внутренние модули во время выполнения? Дело в том, что AMD совместима только с внешними модулями, и мне нужно загружать внутренние вместе с внешними библиотеками в точке входа в main.ts?

Я предпочитаю синтаксис псевдонимов внутренних модулей внешним. Приведенный выше код выглядит намного чище, чем при использовании синтаксиса внешнего модуля:

import Dialogs = module("Modules/App.Widgets.Dialogs");
declare var $ : JQueryStatic;


export class Bootstrapper { 
    static SiteLoad() { 
       var dialog = Dialogs.App.Widgets.Dialogs.LoginDialog(); //Seriously?
       ...
    }
}

Это просто некрасиво. Что делать?

ОБНОВЛЕНИЕ:

Стив, подход, который вы предлагаете, имеет ограничение. В моем первоначальном подходе с использованием внутренних модулей я могу сделать следующее:

import Dialogs = App.Widgets.Dialogs;

declare var $ : JQueryStatic;

export class Bootstrapper { 
    static SiteLoad() { 

        var loginDialog1 = new Dialogs.LoginDialog();  //Instantiation      -OK
        var loginDialog2: Dialogs.LoginDialog;         //Type-Declaration   -OK
    }
}

В подходе, который вы предлагаете, я теряю возможность использовать псевдоним для объявлений типа:

import DialogsModule =  module("Modules/App.Widgets.Dialogs");

var Dialogs : DialogsModule.App.Widgets.Dialogs;

declare var $ : JQueryStatic;

export class Bootstrapper { 
    static SiteLoad() { 

        var loginDialog1 = new Dialogs.LoginDialog();   //Instantiation  -OK        
        var loginDialog2: Dialogs.LoginDialog;  //Type-Declaration -ERROR: The name "Dialogs" does not exist in the current context  
        var loginDialog3: DialogsModule.App.Widgets.Dialogs.LoginDialog;  //Must use full name instead
    }
}

typescript amd requirejs
person parliament    schedule 21.01.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать псевдоним для длинного пути к модулю, например:

import DialogModule = module("Modules/App.Widgets.Dialogs");
var dialogs = DialogModule.App.Widgets.Dialogs;
declare var $ : JQueryStatic;

export class Bootstrapper { 
    static SiteLoad() { 
       var dialog = dialogs.LoginDialog();
       ...
    }
}

Вы можете смешать AMD с простым JavaScript, включив соответствующие файлы самостоятельно, но я рекомендую выбрать один шаблон для использования в вашей программе, чтобы упростить понимание.

person Fenton    schedule 21.01.2013
comment
Отредактированный OP, описывающий, почему этот подход не подходит. Не уверен, что вы имеете в виду, когда смешиваете AMD с простым Javascript. Вы хотели явно написать define оболочки в файле ts и вообще избежать синтаксиса модуля TS ()? Это то, что сводится к более чистому решению? - person parliament; 21.01.2013
comment
Да уж, не самое понятное объяснение. Я имел в виду смешивание использования загрузчика модулей с добавлением вручную дополнительных тегов script, поэтому у вас есть некоторые статические скрипты, а некоторые загружаются загрузчиком модулей. - person Fenton; 22.01.2013
comment
Я понимаю. Хорошо, похоже, нет чистого решения для псевдонимов, совместимого с объявлениями типов. В конечном итоге я приду к смешиванию шаблонов или использованию длинных имен модулей, которые даже не имеют никакого смысла (например, Dialogs.App.Widgets.Dialogs). Поэтому я решил полностью отказаться от использования синтаксиса определения модуля, поскольку он не работает так, как пространства имен C#, как я изначально думал. - person parliament; 22.01.2013
comment
Вместо этого я организовал свою структуру пространства имен, используя папки (например, /Scripts/App/Widgets/Dialogs.ts для модуля Dialog выше) и рассматривая сами файлы как модули (записав экспорт моего модуля непосредственно в глобальную область). Это единственный способ получить чистое сглаживание, которое работает и с объявлениями типов. Пример: import Dialogs = module(App/Widgets/Dialogs); var loginDialog1 = Dialogs.LoginDialog(); // ХОРОШО var loginDialog2: Dialogs.LoginDialog; //Также хорошо. - person parliament; 22.01.2013
comment
Надеюсь, что финальный релиз будет лучше, чем этот. - person parliament; 22.01.2013
comment
Возвращаясь сюда, я с тех пор отказался от подхода, о котором я говорил выше, и провел рефакторинг своего кода, чтобы использовать подход Стива, описанный здесь: stevefenton.co.uk/Content/Blog/Date/201301/Blog/ в сочетании с дополнительной организацией, описанной здесь: stackoverflow.com/a/13850286/1267778 Один класс для каждого файла, скомпилированный в один файл, определенно является правильным выбором. - person parliament; 18.03.2013