TypeScript将订单编译为单个文件

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

问题是相互依赖的类没有以正确的顺序连接到输出JS中。

例如，如果我具有延伸类B级A，它会意味着类B将具有A级之前被编译

（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文件后，仅在需要的文件的运行照顾异步加载的。

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

我用Google搜索“打字稿编译秩序”，并详细阅读前10个结果 - 这意味着下面引用turoials，文档，视频等...

似乎人们已经遇到了同样的问题，但他们的问题有从来没有回答满意。

从我所了解的应该可以做到使用CommonJS外部模块，但我能从答案中理解的是对应该发生什么的一般意义，而不是一个简单而直接的答案，即如何实际做到这一点。

如果你知道答案，让我们来解决这个问题一劳永逸:)

来源

2016-07-30 Royi Bernthal

如果你想将它编译成一个单独的js文件，那么我不会使用模块，但在这种情况下，你应该使用引用，而且我也认为在大型项目中引用会帮助他们代表关系在不同的文件之间（如果有很多文件，它不会被弄乱）。这与其他语言没有区别。有了这个说法，你是否尝试过使用[tsconfig.json]（https://www.typescriptlang.org/docs/handbook/tsconfig-json.html）中的'files'属性来指定要编译的文件？ –

指定文件只是意味着以不同的方式手动设置编译顺序，如果我错了，请纠正我。第二次看使用引用后，它确实类似于其他语言中的操作。有没有比带有繁琐标签的基于路径的引用更微妙的表达方式？类似于使用基于包的路径导入的东西？即类似“import Utils.Mathutils;”而不是“///参考路径=”../ Utils/mathUtils.ts“/>” –

您可以使用导入（这是类似于你所要求的），但这是使用模块，你的情况。我同意这些引用不是很舒服，但这可能就是你所有的。 –

，并不是与打字稿的问题，但ECMAScript中：类不悬挂。

见Dr. Axel Rauschmayer书：

Function declarations are hoisted: When entering a scope, the functions that are declared in it are immediately available – independently of where the declarations happen. That means that you can call a function that is declared later:
foo(); // works, because `foo` is hoisted 

function foo() {} 
In contrast, class declarations are not hoisted. Therefore, a class only > exists after execution reached its definition and it was evaluated. Accessing it beforehand leads to a ReferenceError:
new Foo(); // ReferenceError 

class Foo {} 

你必须照顾到订单。

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

来源

2016-07-30 16:22:18 Paleo

是的，我知道它发生的原因。这个问题是关于以正确的顺序编译打字稿，以便在需要之前评估类。 –

@RoyiBernthal我强烈建议您使用[ES6模块]（https://hacks.mozilla.org/2015/08/es6-in-depth-modules/），例如[with Webpack]（http：// www .jbrantly.com/ES6模块与 - 打字稿 - 和 - 的WebPack /）。 – Paleo

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

您可以手动为输出定义排序顺序。它会缩放吗？编号排序数百个文件并解决条件或循环依赖可能是一个真正的痛苦，并且错误的方式。

当使用out选项时，可以依赖引用标签和编译器的排序。我认为这是最差的解决方案的目标。在某个项目大小的情况下，假设其中存在合理数量的非完美软件设计，则可能会得到非确定性输出排序和零警告或防止依赖性问题。

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

使用进口/出口强制执行你的依赖，你必须编译的模块，并且你需要一个装载机/捆绑，是
避免循环依赖关系，使用依赖关系图或工具，如madge找到它们
使用加载器和一个pleasent工作流创建您的dist文件（我们使用gulp/browserify/tsify/concat/...） - 它的核心约20行代码

您的项目会变得很小吗？ 20个文件？ 50？选择任何。你的项目足够大吗？模块是。享受多项优惠，如滑动节点模块打包或更少需要名称间距。

来源

2016-07-30 20:55:14 sgrtho

TypeScript将订单编译为单个文件

回答

相关问题