将大型打字稿文件拆分为多个文件的模块 [英] Splitting large typescript file into module across multiple files

问题描述

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

  var numbers = [1,2,3]; 
 function formatDate（）{...} 
 
 class Widget {...} 
 class Section {...} 
  

我已尝试将其放入模块并将其拆分为几个文件：

  // Widget.ts 
模块ReportTemplate {
导出类小部件{...} 
} 
 
 //部分。 ts 
模块ReportTemplate {
 export class Section {...} 
} 
 
 //ReportTemplate.ts 
 ///< reference path = Widget.ts/> 
 ///< reference path =Section.ts/> 
模块ReportTemplate {
 var numbers = [1,2,3]; 
函数formatDate（）{...} 
} 
  

我希望这将等同于我的原始文件，但包含在模块中，但我发现的是小部件和部分无法访问数字和 formatDate 。

<我不确定我是否只是误解了引用，所以我尝试在 Section.ts中添加对 ReportTemplate.ts 的引用和 Widget.ts 但它没有帮助。我发现允许 Section.ts 和 Widget.ts 访问的唯一方法数字和 formatDate 是要导出它们，但我不希望它们可以在模块外部访问。

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

解决方案

我建议你转向ES6风格的模块&进口。而不是使用关键字模块。现在称为命名空间。

要调整上面的示例，请执行此操作。 ..

  // Widget.ts 
导出类小部件{...} 
 
 //Section.ts 
 export class Section {...} 
 
 //ReportTemplate.ts 
 import {Widget} from'./Widget.ts'; 
从'./Section.ts'导入{Section}; 
 var numbers = [1,2,3]; 
函数formatDate（）{...} 
函数doStuff（）{
 //使用你导入的类
 var widget = new Widget（）; 
 var section = new Section（）; 
} 
  

你必须告诉tsc使用什么模块语法，并至少瞄准目标ES5：

  // tsconfig.json 
 {
module：common，
target：ES5
} 
  

有关此更改的对话进入TypeScript时 此处

I currently have a large typescript file that I want to split up. There are a few functions and variables only used within the file, and a number of classes. It currently looks something along these lines:

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

class Widget { ... }
class Section { ... }

I've tried putting this in a module and splitting it across a few files:

//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() { ... }
}

I was hoping that this would be equivalent to my original file, but wrapped in a module, but what I've found is that Widget and Section are unable to access numbers and formatDate.

I wasn't sure if I'd just misunderstood the references, so I've tried adding references to ReportTemplate.ts in Section.ts and Widget.ts but it hasn't helped. The only way I've found to allow Section.ts and Widget.ts to access numbers and formatDate is to export them, but I don't want them to be accessible outside the module.

I've read quite a bit about typescript modules, but I haven't found any examples that are the same as what I'm trying to do, so I'm still confused. Am I trying to do something which can't be done, or am I simply going about it the wrong way?

解决方案

I would suggest you move to the ES6 style of modules & imports. Instead of what is now called "namespaces" using the keyword module.

To adapt your example above do this...

//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();
}

You will have to tell tsc what module syntax to use, and target at least ES5:

//tsconfig.json
{
  "module": "common",
  "target": "ES5"
}

There was conversation regarding this change when it when into TypeScript here

这篇关于将大型打字稿文件拆分为多个文件的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！