TypeScript 项目的目录结构

Directory structure for TypeScript projects

提问by codematix

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

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

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.

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

采纳答案by codematix

Looks like I was doing it wrong. I was trying the following structure:

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

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

However, I was attempting to compile the source code under libdirectory separately from the test code under tests.

但是，我试图将lib目录下的源代码与tests.

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

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

and then the tests code:

然后是测试代码：

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

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

This caused the testsfolder to have another libsub-directory and a testssub-directory. This was not what I intended to have.

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

To solve my problem I needed to compile them together, so now my command is:

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

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

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

Thanks everybody for the help.

谢谢大家的帮助。

回答by Angad

Separating generated JS from source TS

将生成的 JS 与源 TS 分离

I would recommend generating a single-file output. Be it browser or for Node, its just a better idea. Bear in mind that most IDEs can hide .gitignored files, so an uncluttered file-pane shouldn'tbe a problem to attain, even if you let the .jsfiles sit right next to their .tsfiles.

我建议生成一个单文件输出。无论是浏览器还是 Node，它只是一个更好的主意。请记住，大多数 IDE 可以隐藏.gitignored 文件，因此即使您让文件紧邻其文件，也不会出现整洁的文件窗格。.js.ts

You cantechnically use --outDirto output the way you want by setting up your tsconfig.jsonappropriately.

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

Separating tests from source

将测试与源分开

This is fairly trivial! Just maintain a /tests. Imports work simply by directory traversal like so import {MyClass} from "../src/modules/my-class"(where the ../is to get out of /tests).

这是相当微不足道的！只需维护一个/tests. 导入只是通过像这样的目录遍历来工作import {MyClass} from "../src/modules/my-class"（../要退出的地方/tests）。

Mechanism to resolve references

解析引用的机制

This is more challenging in the browser than on Node — the latter has requires working out of the box for TypeScript.

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

On the browser

在浏览器上

Strongly recommend you go with something like webpack, but if you insist on living life on the dangerous side, here is a browser-friendly require that I use to rapidly iterate on TypeScript code without having a build process setup.

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

require()for the browser

require()对于浏览器

• Not for the weak hearted — this is tech debt you will accumulate

• 不适合心软的人——这是你将积累的技术债务

Since absolute paths are necessary for working web imports, here is how you can use my require()hack with TypeScript (typically for a fast debugging session that doesn't require rebuilding).

由于工作 Web 导入需要绝对路径，因此您可以通过以下方式将我的require()hack 与 TypeScript 结合使用（通常用于不需要重建的快速调试会话）。

/entities/user.ts

/entities/user.ts

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

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

Where Usernameand Passwordare exported classes in /entities/username.tsand /entities/password.tsrespectively.

whereUsername和Passwordare exported 类分别位于/entities/username.ts和 中/entities/password.ts。

While the ../entities/might seem extraneous, notice that it is essential for the browser to have appropriate absolute paths to our Usernameand Passwordentities. :)

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

回答by Denis Biondic

It is very hard to give any concrete advice, since this hugely depends on the project size, tools, platform etc.

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

1. Typescript compiler has a --outDir option which you can use to output to separate directory. However, you would also probably like to bundle so output to single file might be more preferable, as long as you create mapfiles as well for debugging. You can structure all of this very nicely with Gulp for example.
2. What does this have to do with directory structure? If you want to split it, then split it
3. "Mechanism" is very wide, and depends on the tools you use. For example, the test runner might be able to "import" production code before the test code. You could use some module loading library as well etc etc.

1. Typescript 编译器有一个 --outDir 选项，您可以使用它来输出到单独的目录。但是，您可能还希望将输出打包为单个文件可能更可取，只要您创建映射文件以及用于调试。例如，您可以使用 Gulp 很好地构建所有这些。
2. 这与目录结构有什么关系？如果你想拆分它，然后拆分它
3. “机制”的范围很广，取决于你使用的工具。例如，测试运行器可能能够在测试代码之前“导入”生产代码。您也可以使用一些模块加载库等。