Question

从main.ts入口点运行的我的bootstrapper.ts看起来像这样（减去引用标题）：

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


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

但是，当main.ts尝试加载此文件时，第一行会立即引发引用错误。那时我意识到导入内部模块不会向生成的.js文件的define包装器添加任何依赖项。

那么如何在运行时解析内部模块？是不是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
    }
}

Answer 1

您可以为这样的长模块路径添加别名：

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结合使用 - 但我建议您选择一种模式在您的程序中使用，以使事情更容易理解。

Typescript - 如何在运行时解析内部模块

1 个答案: