将大型打字稿文件拆分为多个文件的模块答案

【问题标题】：Splitting large typescript file into module across multiple files将大型打字稿文件拆分为多个文件的模块
【发布时间】：2015-09-30 01:46:24
【问题描述】：

我目前有一个要拆分的大型打字稿文件。有一些函数和变量只在文件中使用，还有一些类。它目前看起来是这样的：

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 模块的内容，但是我没有找到任何与我正在尝试做的相同的示例，所以我仍然感到困惑。我是在尝试做一些无法完成的事情，还是我只是走错了路？

【问题讨论】：

你是对的，如果命名空间（内部模块）成员没有被导出，它们就不能在单独的文件中访问。
这是否意味着documentation 是错误的？ “因为我们希望这里的接口和类在模块外部可见，所以我们在它们前面加上 export。” “即使文件是分开的，它们都可以贡献给同一个模块，并且可以像在一个地方定义一样被使用。”这听起来像export 是为了在模块外公开，但实际上是为了在文件外公开吗？
由于命名空间的编译方式，两者兼而有之。每个文件中的命名空间都是单独编译的，并且在运行时每个命名空间都建立在前一个命名空间的基础上。在编译期间，TypeScript 知道从何处获取命名空间中的成员，但生成的 JavaScript 需要在运行时访问它们，因此需要导出。 - "as if they were all defined in one place" 部分虽然具有误导性。
感谢您的解释。大概这意味着不可能将某些内容暴露给同一模块内但不同文件的代码，而不会将其暴露给模块外的代码？
TypeScript 命名空间（也称为模块）每个都单独编译到不同的闭包中，即使它们的名称相同。在命名空间/模块中真正可见的唯一变量和函数是exported。非exported 函数和变量保留在闭包内。

标签： javascript typescript

【解决方案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

【讨论】：