如何用 ESM 导入替换 <reference path/> 指令？答案

【问题标题】：How to replace <reference path/> directive with ESM import?如何用 ESM 导入替换 <reference path/> 指令？
【发布时间】：2016-06-23 23:59:43
【问题描述】：

我正在尝试编写一个 TypeScript 应用程序并得出一个结论，即我不喜欢 <reference path /> 三斜杠指令。我发现改用import 'something' 更合适。

但是当我尝试替换我的参考路径时，我不断收到模块未知的错误。

这是我的文件夹结构：

/app
    /ViewModels
        ApplicationViewModel.ts
    app.ts

ApplicationViewModel.ts

module ApplicationVM {
    export class ApplicationViewModel {
        constructor(public test:string) {
        }
    }
}

app.ts

/// <reference path="ViewModels/ApplicationViewModel.ts" />

var a = new ApplicationVM.ApplicationViewModel('test');

这个很好用。如何让以下代码也能正常工作？

import * as App from 'noidea';
var a = new App.ApplicationViewModel('test');

对于“noidea”，我尝试过：ViewModels/ApplicationViewModel、ApplicationVM asl。我什至将它与<reference path /> 结合使用，但也没有用。

【问题讨论】：

【解决方案1】：

从 ApplicationViewModel.ts 中删除模块声明（如果您使用外部模块，每个文件已经是一个模块）：

export class ApplicationViewModel {
    constructor(public test:string) {
    }
}

然后在你的 app.ts 中

import * as App from './ViewModels/ApplicationViewModel';
var a = new App.ApplicationViewModel('test');

【讨论】：

【解决方案2】：

你需要使用所谓的external modules:

ApplicationViewModel.ts

module ApplicationVM {
    export class ApplicationViewModel {
        constructor(public test:string) {
        }
    }
}

export = ApplicationVM;

app.ts

import { ApplicationViewModel } from "./ViewModels/ApplicationViewModel"
var a = new ApplicationViewModel('test');

【讨论】：