构建TypeScript代码库有哪些建议?

时间:2012-12-17 21:14:28

标签: typescript

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

但现在我正在使用TypeScript构建一个移动Web应用程序,并发现自己以同样的方式构建我的代码。但是,这不太好用:

  • 每个文件都会生成一个模块包装器,所以如果你有很多具有相同模块的文件,那么输出(捆绑时)会包含很多不必要的代码行。
  • 引用其他模块中的类型是......不像C#中那样好,因为你必须在类型名称前加上模块名称。

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

是否有更好的方法来构建TypeScript代码,而不是我目前正在做的/计划或者像上面这样建议的做法?对于喜欢单一责任原则的人来说,还有哪些替代方案值得考虑?

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

2 个答案:

答案 0 :(得分:14)

以下是我的推荐。

网站

如果您在网站上使用TypeScript,请使用模块封装完整且独立的功能块并将其保存在一个文件中(除非它变得无法管理)。保守“模块a”对“模块b”的内部位的访问量有多大。

将所有生成的JavaScript捆绑并缩小为单个文件。

用以下内容声明您的模块:

module MyModule {
    // ...
}

使用引用将其提供给其他代码文件:

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

Web App

对于Web应用程序,您需要确定脚本繁重的内容。如果事情要轻量化,那就像对待网站一样。如果你要有很多脚本,那么AMD就是你的朋友。

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

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. 仅加载网络应用/服务器应用所需的内容

答案 1 :(得分:1)

这是非常主观的,但是对于值得我们使用模块或多或少作为命名空间并因此将相关类组合在一个文件中,除了在我们的视图模型中我们或多或少地坚持一个文件=一个类,就像我们为C#所做的那样。

这样做的一个原因是,在客户端开发中,我们发现自己创建了更多非常小的类和接口(通常每个只有两个或三个参数),通常分组关于特定组件或视图的工作方式,以及将这些文件整理在一个文件中似乎更有意义。