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

我目前有一个大的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.ts
模块报告模板{
导出类小部件{…}
}
//第1.ts节
模块报告模板{
导出类节{…}
}
//ReportTemplate.ts
/// 
/// 
模块报告模板{
变量数=[1,2,3]；
函数formatDate（）{…}
}

我希望这将等同于我的原始文件，但包装在一个模块中，但我发现

小部件

和

部分

无法访问

数字

和

格式日期

我不确定我是否只是误解了引用，所以我尝试在

Section.ts

和

Widget.ts

中添加对

ReportTemplate.ts

的引用，但没有帮助。我发现允许

Section.ts

和

Widget.ts

访问

number

和

formatDate

的唯一方法是导出它们，但我不希望它们在模块之外被访问

---

我已经读了很多关于typescript模块的书，但是我还没有找到任何与我尝试做的相同的例子，所以我仍然感到困惑。我是在尝试做一些做不到的事情，还是只是走错了方向？

我建议您转向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时，出现了有关此更改的对话。您是正确的，如果未导出命名空间（内部模块）成员，则无法在单独的文件中访问它们。这是否意味着错误？“因为我们希望这里的接口和类在模块外部可见，所以我们在它们前面加上了导出。”“即使文件是分开的，它们也可以贡献给同一个模块，并且可以像在一个地方定义的一样被使用。”这听起来像是

export

是为了在模块外部公开，但它实际上是为了在文件之外公开吗？因为名称空间的编译方式，它是两者兼而有之的。每个文件中的名称空间都是单独编译的，在运行时，每个名称空间都建立在前一个名称空间的基础上。在编译期间，TypeScript知道从何处获取名称空间中的成员，但生成的JavaScript需要在运行时访问这些成员，因此需要导出。-

“好像它们都是在一个地方定义的”

部分有误导性。谢谢你的解释。这可能意味着不可能将某个内容暴露于同一模块内但不同文件的代码中，而不将其暴露于模块外的代码中？是的，没错。一种选择是使用单独的名称空间，然后在另一个模块中封装所有内容，然后只导出您想要的名称空间。