Typescript 在内部模块中导入外部模块

Question

我需要一些关于 Typescript 以及如何在内部模块中使用外部模块的帮助。

我想将我所有的 ViewModel 代码逻辑存储在 ViewModels 内部模块中。

** HomePageViewModel.ts **

module ViewModels {
export class HomePageViewModel {
    constructor() {
        console.log('Creating HomePageViewModel');
    }

    public SayHello(): void {
        console.log('Hello from HomePageViewModel');
    }
}
}

** ViewModelFactories **

public static CreateHomePageViewModel(): ViewModels.HomePageViewModel {
    return new ViewModels.HomePageViewModel();
} 

这工作正常，我可以编译并且在执行时一切正常。

现在，如果我在 HomePageViewModel 中添加一个导入（例如淘汰赛）

import ko = require('knockout');

Typescript 不再编译。 ViewModelFactories 代码在 Views 下带有下划线，并通知我它“找不到符号视图”。

如何从 ViewModel 模块中访问淘汰模块？

Answer 1

基本上，您不能混合使用两种模块类型。

一旦您需要另一个外部模块，您的内部模块就会变成外部模块。 您必须以“内部”方式访问淘汰赛：将其作为 <script> 导入到您的起始 HTML 文件中（正如您可能已经为其他文件所做的那样），然后使用全局 ko 变量。

另一种解决方案是使您的模块外部化。

Answer 2

您需要获取带有“ko.xxxxxx”定义的“knockout.d.ts”文件（或类似文件）。您可以从nuget 或github 获得它。 之后你就可以写了，例如

var observable = ko.observable<number>(100);

在您的 TypeScript 代码中。当然，您仍然需要在您的页面上包含“knockout.x.x.x.js”文件。

您可能应该使用 namspase，如 TypeScript Documentation 所述：

不必要的命名空间

如果您要将程序从内部模块转换为外部模块，很容易得到如下所示的文件： 形状.ts

export module Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

这里的顶层模块Shapes 无缘无故地把Triangle 和Square 包起来了。这对于您的模块的使用者来说是令人困惑和烦人的： shapeConsumer.ts

import shapes = require('./shapes');
var t = new shapes.Shapes.Triangle(); // shapes.Shapes?

Answer 3

您的 HomePageViewModel 是在 ViewModels 模块中定义的，而不是在 Views 模块中。

public static CreateHomePageViewModel(): ViewModels.HomePageViewModel {
    return new ViewModels.HomePageViewModel();
}