带有单独编译文件的打字稿继承答案

【问题标题】：Typescript Inheritance with separate compiled files带有单独编译文件的打字稿继承
【发布时间】：2016-09-08 12:48:11
【问题描述】：

我正在尝试使用 typescript 设置基于 angularJS 的代码。

使用 yeoman.io 使用“generator-gulp-angular”模块创建初始项目结构。对于尝试使用 typescript 的业务代码，我按照 TypeScript - How to keep compiled files in a separate directory? 将 js 文件分离到另一个目录中。

所有不同的 JS 文件都会自动合并到单个 JS 文件中 - 这是由 yeoman 生成的代码提供的。

我面临的问题是我想使用 typescript 的继承功能，在编译 TS 代码 base.js 并生成 derived.js 之后。但是，当我运行 gulp build（再次附带 yeoman 代码）时，它试图启动 phantomJS，它给了我以下错误：

undefined 不是一个对象（评估 'b.prototype'）

在网上搜索后，我发现它与加载 JS 文件的顺序有关，但在我的情况下，我只有一个 JS 文件。

【问题讨论】：

【解决方案1】：

您的单个 JS 文件仍然是单独编译的文件的串联（大部分情况下）。您的错误提示您的输出文件中的顺序错误。

解决这个问题的最快方法是使用 TypeScript 引用标签。从子类中引用基类，如下所示：

/// <reference path='./base.ts' />

不要反过来引用。现在编译器应该尊重输出文件中的顺序。

尽管我必须警告你：看看 ES6 风格的模块和模块加载器。 reference 策略存在扩展问题。

【讨论】：

了解参考路径。是否总是需要有单个输出文件或者我可以使用多个文件？
该参考资料基本上告诉 TypeScript “在那里”会发生什么——就是这样。它与最终的捆绑过程不同。但是当使用 outFile 选项时，编译器会善意地将引用视为依赖关系并调整连接顺序（如果引用的文件在编译文件的范围内）。当然你可以忍受它，但它不会那么好。引用标签不是真正的依赖，只是一个引用。
关于单个输出文件：使用 Node 时，您永远不需要单个输出文件，因为 Node 可以从文件系统中请求模块 - 无论如何都需要使用 ES6 样式的模块。在远程/浏览器环境中，您需要一些东西来弥合文件/模块之间的差距。这可以是一个提供everything的输出文件，你可以像你一样实现它——更复杂的是使用像browserify这样的工具（再次使用ES6模块）。或者一些异步加载机制。
请注意，TS 会将 ES6 样式模块 语法转换为 Node 或捆绑工具可以理解的兼容格式（取决于您使用的编译选项）。