typescript - 对于构建 TypeScript 代码库有哪些建议？

Question

多年来，我一直在使用 C#，并且主要习惯于每种类型一个文件的处理方式。我也喜欢将文件放入子文件夹(对应于 C# 中的命名空间)。

但现在我正在使用 TypeScript 构建一个移动网络应用程序，并发现自己以几乎相同的方式构建我的代码。然而，这并不太奏效:

• 每个文件都会生成一个模块包装器，因此如果您有许多文件都包含相同的模块，则输出(捆绑时)会包含很多不必要的代码行。
• 在其他模块中引用类型...不如在 C# 中好，因为您必须在类型名称前加上模块名称前缀。

第一点应该可以通过编写一个小工具从捆绑输出中去除不必要的模块包装来解决。而且我认为我需要避免使用子模块并将所有内容都粘贴到一个模块中，而不管文件系统位置如何。

有没有比我目前正在做/计划的更好的方法来构建 TypeScript 代码，或者像上面这样的方法是否值得推荐？对于喜欢单一职责原则的人来说，有哪些替代方案值得考虑？

PS:我希望这符合 SO 的指导方针，尽管可能有点主观和开放性。

Answer 1

这是我的建议。

网站

如果您在网站上使用 TypeScript，请使用模块来包含完整且独立的功能 block 并将其保存在一个文件中(除非它变得无法管理)。对“模块 a”对“模块 b”的内部位的访问权限保持保守。

将所有生成的 JavaScript 打包并压缩到一个文件中。

声明你的模块:

module MyModule {
    // ...
}

并使用引用使它们对其他代码文件可用:

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

网络应用

对于 Web 应用程序，您需要决定脚本的繁重程度。如果事情是轻量级的，就把它当作一个网站。如果您要编写大量脚本，那么 AMD 就是您的 friend 。

借助 AMD，您可以使用文件夹结构来组织代码。您的文件就是您的模块，因此您可以将文件命名为 MyModule.ts，而不是使用 module MyModule 声明。然后，您可以使用文件夹和文件结构组织代码，并根据需要导入模块:

import myModule = module("./Messaging/Async/MyModule");

因此，将 import 视为您的 using 语句 - 除了您需要为其命名。

在运行时，您需要一些东西来为您加载模块。 RequireJS是一个流行的选择。

你只需在你的页面上添加一个脚本标签，它会加载 RequiresJS 并告诉它你的顶级模块的名称:

<script data-main="/Messaging/Async/MyModule" src="scripts/require.js"></script>

服务器应用

对于服务器应用程序，您几乎肯定会想要使用 CommonJS(例如，nodejs 默认支持)。

它的工作方式在很大程度上类似于 AMD(AMD 实际上是基于 CommonJS)，除了服务器会为您加载模块，因此您不需要包含模块加载脚本。

金子弹

这真的是所有指导。如果您愿意，您可以对非常大的程序使用网站样式捆绑 - 鉴于脚本将被下载一次并缓存，您可能会认为前期成本值得简单化。

因此，请使用指南，直到您认为它不适合您的特定计划并且想要以不同的方式做事。该指南基于...的原则

1. 减少网站的 http 请求数
2. 提高网络应用/服务器应用的可读性和可维护性
3. 仅加载网络应用/服务器应用所需的内容