TypeScript项目的目录结构

Question

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

我希望在这样的结构中具有以下特征:

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

Answer 1

将生成的JS与源TS分离

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

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

将测试与源分开

这是相当微不足道的!只是保持一个/tests.导入只是通过目录遍历工作import {MyClass} from "../src/modules/my-class"(如果../要离开/tests).

解决参考的机制

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

在浏览器上

强烈建议你选择类似的东西webpack,但如果你坚持生活在危险的一面,这是一个浏览器友好的要求,我用它来快速迭代TypeScript代码,而无需构建过程设置.

require() 对于浏览器

• 不是为了弱者 - 这是你将积累的科技债务

由于绝对路径是工作Web导入所必需的,因此以下是如何使用require()TypeScript(通常用于不需要重建的快速调试会话).

/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分别.

虽然../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 .

谢谢大家的帮助.