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

Tim*_*Tim 12 javascript typescript

我目前有一个大型的打字稿文件,我想分开.有一些函数和变量仅在文件中使用,还有许多类.它目前看起来像这样:

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

class Widget { ... }
class Section { ... }
Run Code Online (Sandbox Code Playgroud)

我已经尝试将它放在一个模块中并将其拆分为几个文件:

//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() { ... }
}
Run Code Online (Sandbox Code Playgroud)

我希望这相当于我的原始文件,但包含在一个模块中,但我发现的是,Widget并且Section无法访问numbersformatDate.

我不确定我是否只是误解了引用,所以我尝试添加对ReportTemplate.tsin的引用Section.ts,Widget.ts但它没有帮助.只有这样,我发现允许Section.tsWidget.ts访问numbers,并formatDate为以出口为主,但我不希望他们模块外部访问.

我已经阅读了很多关于打字稿模块的内容,但我没有找到任何与我想要做的相同的例子,所以我仍然感到困惑.我是在尝试做一些无法做到的事情,还是我只是以错误的方式去做?

Bro*_*cco 6

我建议你转向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();
}
Run Code Online (Sandbox Code Playgroud)

你必须告诉tsc使用什么模块语法,并至少定位ES5:

//tsconfig.json
{
  "module": "common",
  "target": "ES5"
}
Run Code Online (Sandbox Code Playgroud)

这里进入TypeScript时,有关于此更改的讨论