TypeScript项目的目录结构

Question

什么是TypeScript项目的惯用目录结构？

我希望在这样的结构中有以下特点：

1. TypeScript源代码和转置JavaScript的单独目录
2. 项目源代码和测试代码的单独目录
3. 跨测试和源代码解析引用的机制。

Answer 1

从源TS中分离生成的JS

我建议生成一个单文件输出。不管是浏览器还是Node，这都是一个更好的主意。请记住，大多数IDE可以隐藏.gitignored文件，所以一个整洁的文件窗格不应该成为一个问题，即使您让.js文件位于它们的.ts文件旁边。

从技术上讲，您可以通过适当设置--outDir来输出您想要的方式。

源分离试验

这是相当微不足道的！只需维护一个/tests。导入只是通过目录遍历来工作，比如so import {MyClass} from "../src/modules/my-class" (其中../将退出/tests)。

解析引用的机制

这在浏览器中比在节点上更有挑战性，后者让require为TypeScript开箱即用。

在浏览器上

强烈建议您使用类似webpack的东西，但是如果您坚持在危险的方面生活，这里有一个对浏览器友好的要求，我使用它来快速迭代TypeScript代码，而不需要构建过程设置。

for the browser

• 不是为了软弱的人-，这是你将积累的技术债务，

由于绝对路径是工作web导入所必需的，下面是如何在TypeScript中使用我的TypeScript黑客(通常用于不需要重新构建的快速调试会话)。

/entities/user.ts

import {Username} from "../entities/username";
import {Password} from "../entities/password";

export class User {
    username: Username;
    password: Password;
}

其中Username和Password分别是/entities/username.ts和/entities/password.ts中的export编辑类。

虽然../entities/可能看起来是无关的，但是请注意，浏览器必须有到我们的Username和Password实体的适当绝对路径。:)

Answer 2

看来我做错了。我尝试了以下结构：

src
|---- lib
|-----|---- mymodule.ts
|---- tests
|-----|---- mymodule.tests.ts

但是，我试图将lib目录下的源代码与tests下的测试代码分别编译。

find src/lib -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir lib

然后测试代码：

find src/tests -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir tests

这导致tests文件夹有另一个lib子目录和一个tests子目录.这不是我想要的。

为了解决我的问题，我需要将它们编译在一起，所以现在我的命令是：

find src -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir .

谢谢大家的帮助。

Answer 3

很难给出任何具体的建议，因为这在很大程度上取决于项目的规模、工具、平台等。

1. Typescript编译器有一个--outDir选项，您可以使用它输出到单独的目录。但是，您也可能希望将输出绑定到单个文件，只要您同时创建映射文件以进行调试，则可能更好。例如，您可以使用Gulp很好地构造所有这些。
2. 这与目录结构有什么关系？如果你想把它分开，那就把它分开
3. “机制”非常广泛，取决于您使用的工具。例如，测试运行程序可能能够在测试代码之前“导入”生产代码。您也可以使用一些模块加载库等。