Question

我现在通过在编译器选项中指定outFile将我的TypeScript项目编译为单个JS文件。在我的项目中，每个类都在不同的文件中定义。

问题是依赖于彼此的类没有以正确的顺序在输出JS中连接。

例如，如果我有A类扩展B类，那么它就意味着必须在A类之前编译B类。

（1）

class A extends B { } //error - can't find B

class B { }

（2）

class B { }

class A extends B { } //works as expected

问题是TypeScript编译中的文件顺序没有根据类依赖性定义，导致很多实例（1）。

可以通过多行来手动定义编译顺序来解决：

/// <reference path="myFile.ts"/>

然而，它并不理想，很快就会成为大型项目的头疼。

我读到的另一个选择是使用外部模块，并能够要求/导入相关的类/文件。

听起来不错，但在将每个ts文件编译成自己的js文件后，似乎只在所需文件的运行时期间处理ASYNC加载。

我需要的是在编译时间期间根据类依赖关系从ts到js定义正确的编译顺序。

我用谷歌搜索＆＃34;打字稿编译顺序＆＃34;并仔细阅读前10个结果 - 意味着以下对turotials，文档，视频等的引用......

似乎人们一直在经历同样的问题，但他们的问题从来没有得到满足的回答。

根据我的理解，应该可以使用CommonJS外部模块，但我从答案中可以理解的是对应该发生什么的一般意义，而不是如何实际执行它的简单直接的答案。

如果您知道答案，请让我们一劳永逸地解决这个问题：）

Answer 1

这不是TypeScript的问题，但使用ECMAScript：类不会被提升。

请参阅Dr. Axel Rauschmayer的书：

函数声明被挂起：当输入作用域时，在其中声明的函数立即可用 - 与声明发生的位置无关。这意味着您可以调用稍后声明的函数：
foo(); // works, because `foo` is hoisted

function foo() {}
相反，类声明并未悬挂。因此，只有一个类>在执行达到其定义后进行评估并进行评估。事先访问它会导致ReferenceError：
new Foo(); // ReferenceError

class Foo {}

您必须注意订单。

...或者使用捆绑器（Webpack）或装载器（SystemJS）和ES6模块。

Answer 2

可以肯定地说，没有单向来做到这一点。但我建议您瞄准最安全，最复杂的构建/捆绑设置。根据项目的规模，请考虑以下几点。

您可以手动为输出定义排序顺序。它会扩展吗？不。排序数百个文件并解决条件或循环依赖关系可能是一个真正的痛苦，顺便说一句也是错误的。

使用 out 选项时，您可以依赖引用标记和编译器的顺序。我认为这是最糟糕的解决方案。在某个项目规模并且假设其中存在合理数量的非完美软件设计时，您可能最终会得到非确定性输出排序和零警告或针对依赖性问题的保护。

这就是为什么我建议如下：

使用导入/导出来强制执行您的依赖项，您已经编译了模块，并且您需要一个加载器/捆绑器，是的
避免循环依赖，使用依赖关系图或 madge 等工具来查找它们
使用加载程序和pleasent工作流来创建你的dist文件（我们使用gulp / browserify / tsify / concat / ...） - 它的核心是大约20行代码

你的项目会变小吗？ 20个档案？ 50？选择任何。你的项目足够大吗？它是模块。享受多种好处，例如光滑的节点模块捆绑或更少需要名称间距。

TypeScript编译单个文件的顺序

2 个答案: