TypeScript 项目的目录结构

Posted 2023-03-13

【中文标题】TypeScript 项目的目录结构

【英文标题】：Directory structure for TypeScript projects

【发布时间】：2016-06-18 14:47:48

【问题描述】：

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

我希望这种结构具有以下功能：

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

【参考方案1】：

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

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

【参考方案2】：

从源TS中分离生成的JS

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

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

从源代码中分离测试

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

解决引用的机制

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

在浏览器上

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

require() for the browser

不适合弱者 - 这是您将积累的技术债务

由于工作网络导入需要绝对路径，因此您可以使用我的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 分别是exported 类在/entities/username.ts 和/entities/password.ts 中。

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

【讨论】：

感谢您的意见。您的帖子让我找到了解决方案。

我现在在 2020 年重新审视这个问题。感谢任何提醒我为什么我如此确定为 Node 生成单文件输出是个好主意的人 ?

@Angad 为节点生成单个文件是个坏主意？你能详细说明一下吗？

@JanCiołek 嗯，我认为这肯定不是一个坏主意！这确实是一个动机问题——到目前为止，在我的项目中，除了为浏览器使用 WebPacking 时，我还没有生成单文件输出的动机。它使调试变得非常复杂，所以除非你需要它，否则我不会推荐它。

【参考方案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 .

感谢大家的帮助。

【讨论】：

谢谢。我现在用相同的方式构建我的项目，将 tsconfig.json 放在 src 文件夹中，我只需运行“tsc -p ./src”即可编译所有内容。

提醒一下，使用正确的工具（例如 Atom 上的 Atom TypeScript）自动创建 tsconfig.json 非常简单。如果您还没有，强烈建议您检查一下 - 因为构建过程而选择特定的目录结构听起来像是可读性债务的开始:)