TypeScript 项目的目录结构

Question

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

我想要这样的结构具有以下特点：

TypeScript 源代码和转译文件的单独目录JavaScript
项目源代码和测试代码的独立目录
解析跨测试和源代码引用的机制。

Answer 1

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

Typescript 编译器有一个 --outDir 选项，您可以使用它输出到单独的目录。但是，您也可能想要捆绑，因此输出到单个文件可能更可取，只要您创建 map 文件以及用于调试。例如，您可以使用 Gulp 很好地构建所有这些。
这与目录结构有什么关系？要分就分
“机制”的范围很广，要看你用的是什么工具。例如，测试运行器可能能够在测试代码之前“导入”生产代码。您也可以使用一些模块加载库等。

Answer 2

将生成的 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() for the browser

不适合胆小的人 — 这是您将积累的技术债务

由于绝对路径对于有效的 Web 导入是必需的，下面是您如何使用我的 require() hack 和 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 中 exported 类。

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

Answer 3

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

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 .

感谢大家的帮助。

TypeScript 项目的目录结构

Directory structure for TypeScript projects

directory-structure

conventions

typescript

typescript1.8

将生成的 JS 与源 TS 分离

从源代码中分离测试

解析引用的机制

在浏览器上