将大型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”和“Widget.ts”中添加对“ReportTemplate.ts”的引用，但没有帮助。我发现唯一允许“Section.ts”和“Widget.ts”访问“numbers”和“formatDate”的方法是导出它们，但我不想让它们在模块外部可访问。我已经阅读了很多关于TypeScript模块的文章，但没有找到与我尝试做的相同的示例，所以我仍然感到困惑。我是在尝试做一些不可能完成的事情，还是我走错了方向？

- Tim

---

你是正确的，如果命名空间（内部模块）成员没有被导出，它们在单独的文件中是不可访问的。 - thoughtrepo

这是否意味着文档有误？ “因为我们希望在模块外部可见这里的接口和类，所以我们用export作为前缀。” “尽管文件是分开的，但它们可以共同贡献给同一个模块，并且可以像在一个地方定义了所有内容一样使用。”这听起来像是export用于使模块外部公开，但实际上它是用于使文件外部公开吗？ - Tim

因为命名空间的编译方式，它既是分开编译的，也是动态构建的。每个文件中的命名空间都是分别编译的，并且在运行时，每个命名空间都基于之前的命名空间进行构建。在编译过程中，TypeScript 知道在命名空间中获取成员的位置，但生成的 JavaScript 需要在运行时访问它们，因此需要导出。虽然 "仿佛它们都是在同一个地方定义的" 这部分有误导性。 - thoughtrepo

感谢您的解释。这意味着如果要将同一模块中但不同文件中的内容暴露给代码，就必须同时将其暴露给模块外部的代码，是吗？ - Tim

TypeScript 命名空间（也称为模块）会分别编译成不同的闭包，即使它们的名称相同。在命名空间/模块中实际可见的只有 export 的变量和函数。未被 export 的函数和变量仍然留在闭包内部。 - Stephen Chung

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进行这个更改时，有关于此更改的讨论 在这里

- Brocco