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

Splitting large typescript file into module across multiple files

本文关键字：文件 模块 大型 typescript 拆分      更新时间：2023-09-26

我目前有一个大的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模块，但我还没有发现任何例子，是相同的，我想做的，所以我还是很困惑。我是在尝试做一些无法完成的事情，还是我只是用错了方法?

我建议您移动到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 这里

相关文章：