Directory structure for TypeScript projects

Question

What would be an idiomatic directory structure for a TypeScript project?

I would like the following features in such a structure:

1. Separate directories for TypeScript source code and transpiled JavaScript
2. Separate directories for project source code and test code
3. Mechanism to resolve references across tests and source code.

Answer 1

从源TS分离生成的JS

我建议生成单文件输出。无论是浏览器还是Node，它只是一个更好的主意。请记住，大多数IDE都可以隐藏.gitignore个文件，因此即使您让.js文件存在，整洁的文件窗格也不应该成为问题在他们的.ts文件旁边。

您 可以在技术上使用--outDir通过适当设置tsconfig.json来输出您想要的方式。

将测试与源分开

这是相当微不足道的！只需保持/tests。导入只是通过目录遍历工作，如import {MyClass} from "../src/modules/my-class"（../将离开/tests）。

解决参考的机制

这在浏览器中比在Node上更具挑战性 - 后者的require开箱即用于TypeScript。

在浏览器上

强烈建议你使用像webpack这样的东西，但是如果你坚持危险的生活，这是一个浏览器友好的要求，我用它来快速迭代TypeScript代码，而无需构建过程设置

require() for the browser

• 不适合弱势群体 - 这是您将积累的科技债务

由于绝对路径是处理Web导入所必需的，因此以下是使用TypeScript require() hack的方法（通常用于不需要重建的快速调试会话）。

/entities/user.ts

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

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

其中Username和Password分别是export和/entities/username.ts中的/entities/password.ts个。{/ p>

虽然../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选项，您可以使用它输出到单独的目录。但是，您可能也希望捆绑，因此只要您创建 map 文件以进行调试，输出到单个文件可能更为可取。例如，您可以使用Gulp很好地构建所有这些。
2. 这与目录结构有什么关系？如果你想拆分它，那么拆分它
3. “机制”非常广泛，取决于您使用的工具。例如，测试运行器可能能够在测试代码之前“导入”生产代码。你可以使用一些模块加载库等等。