javascript - 跨多个文件将大型 typescript 文件拆分为模块

Question

我目前有一个大的 typescript 文件，我想拆分。有几个函数和变量只在文件中使用，还有一些类。目前看起来是这样的:

var numbers = [1, 2, 3];
function formatDate() {...}

class Widget { ... }
class Section { ... }

我试过将其放入一个模块并将其拆分为几个文件:

//Widget.ts
module ReportTemplate {
    export class Widget { ... }
}

//Section.ts
module ReportTemplate {
    export class Section { ... }
}

//ReportTemplate.ts
/// <reference path="Widget.ts"/>
/// <reference path="Section.ts"/>
module ReportTemplate {
    var numbers = [1, 2, 3];
    function formatDate() { ... }
}

我希望这相当于我的原始文件，但包装在一个模块中，但我发现 Widget 和 Section 无法访问 numbers 和 formatDate。

我不确定我是否只是误解了这些引用，所以我尝试在 Section.ts 和 中添加对 ReportTemplate.ts 的引用Widget.ts 但它没有帮助。我发现允许 Section.ts 和 Widget.ts 访问 numbers 和 formatDate 的唯一方法是导出它们，但我不希望它们可以在模块外访问。

我已经阅读了很多关于 typescript 模块的内容，但是我还没有找到任何与我正在尝试做的相同的例子，所以我仍然很困惑。我是在尝试做一些无法完成的事情，还是只是以错误的方式去做？

Answer 1

我建议您转向 ES6 风格的模块和导入。使用关键字 module 而不是现在所谓的“命名空间”。

要调整上面的示例，请执行此操作...

//Widget.ts
export class Widget { ... }

//Section.ts
export class Section { ... }

//ReportTemplate.ts
import {Widget} from './Widget.ts';
import {Section} from './Section.ts';
var numbers = [1, 2, 3];
function formatDate() { ... }
function doStuff() {
  // use the classes you imported
  var widget = new Widget();
  var section = new Section();
}

你必须告诉 tsc 使用什么模块语法，并且至少以 ES5 为目标:

//tsconfig.json
{
  "module": "common",
  "target": "ES5"
}

当进入 TypeScript 时，有关于此更改的讨论 here