typescript - How do I use modules in other files?

Question

I'm struggling with TypeScript modules in other files. Let me explain...

I have a file ModuleOne.ts with:

module Messages {
    export var TestAlert: string = "It works!";
}

then in my app.ts, I have:

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="ModuleOne.ts" />
declare var $;

$(function () {
    alert(Messages.TestAlert);
});

It compiles fine, but in console, I get "Uncaught ReferenceError: Messages is not defined". If I move Messages module from ModuleOne.ts to app.ts, everything works fine. How do I use Messages module from ModuleOne.ts file?

Answer 1

最常见的原因是您的页面中没有包含这两个文件：

<script src="app.js"></script>

这会出错，因为 app.js 依赖于 ModuleOne.js - 所以你也需要添加对它的引用。

<script src="ModuleOne.js"></script>
<script src="app.js"></script>

或者，您可以使用 --out 标志编译您的 TypeScript，为您的整个程序生成一个 JavaScript 文件。

tsc --out final.js app.ts

编译器将为您遍历所有依赖项，因此您只需要指定顶级文件。