TypeScript 项目的目录结构

关键词：

【中文标题】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 非常简单。如果您还没有，强烈建议您检查一下 - 因为构建过程而选择特定的目录结构听起来像是可读性债务的开始:)

前端开发react+typescript项目初体验(代码片段)

创建React+TypeScript应用项目使用下面命令创建：比如我要创建一个叫react-typescript-demo的项目，npxreact-create-appreact-typescript-demo--templatetypescript创建成功后的目录结构如下：运行模板项目cd进入目录，并yarnstart跑起来... 查看详情

白鹭引擎开发h5游戏（项目结构）

... 新建项目中 选择生成的项目的结构： 　src是TypeScript源码目录　　resource是我们项目中的资源路径，一般我们把图片音频等素材放置asset目录 查看详情

react项目实践（一）之项目创建

...不同开发者要同步对pod库的依赖时。运行后的项目1、将TypeScript以及ReactNative和Jest的依赖添加到您的项目中。2、添加一个TypeScript配置文件。在项目的根目录中创建一个tsconfig.json：3、创建一个jest.config.js文件来配置Jest以使用TypeSc... 查看详情

TypeScript：当编译增加项目结构的深度时如何从父文件夹导入

】TypeScript：当编译增加项目结构的深度时如何从父文件夹导入【英文标题】：TypeScript:Howtoimportfromparentfolderwhencompilationaddsdepthtoprojectstructure【发布时间】：2018-02-2322:07:59【问题描述】：我的项目结构如下dist|-src||-s.js|-test|-t.jsnode_... 查看详情

在 Typescript 中防止不适当的导入和执行项目层次结构

】在Typescript中防止不适当的导入和执行项目层次结构【英文标题】：PreventinginappropriateimportsandenforcingprojecthierarchyinTypescript【发布时间】：2020-07-2904:45:24【问题描述】：在TS项目中，我希望阻止以下内容：来自文件夹common的文件... 查看详情

具有同等重要的服务器端和客户端部分的项目的典型目录结构

...（用于WebAPI、提取元数据、数据库相关操作等）和一个用TypeScript编 查看详情

如何从本地目录而不是全局目录运行 TypeScript

】如何从本地目录而不是全局目录运行TypeScript【英文标题】：HowtorunTypeScriptfromlocaldirectoryinsteadofglobal【发布时间】：2019-10-2704:25:04【问题描述】：所以我有多个项目，每个项目都使用diff类型的TypeScript，所以我从全局卸载并将它... 查看详情

解决基于typescript的rn项目相对路径引入组件的问题(代码片段)

...方案，都没起作用，主要是由于我的项目是基于RN(0.59.5)+TypeScript搭 查看详情

带有引用的 TypeScript 项目

】带有引用的TypeScript项目【英文标题】：TypeScriptprojectwithreferences【发布时间】：2019-08-0214:01:43【问题描述】：我使用projectreferences来引用“前”和“后”项目中的“共享”项目。tsc-v:Version3.3.3项目结构：./MY_PROJECT.code-workspace/*the... 查看详情

新手向我是如何快速创建react+typescript项目(代码片段)

文章目录使用CreateReactApp目录结构解读绝对路径与相对路径代码格式化统一配置（可选）WhatisPrettier?Why?如何安装自动化执行代码格式化Pre-commitHook使用Pre-commitHook介绍解决冲突问题后续最后使用CreateReactAppCreateReactApp是一个... 查看详情

cocoscreator主程入门教程——代码结构

...本名关健昌，10年游戏生涯，现隐居五邑。本系列文章以TypeScript为介绍语言。 这一篇简单介绍下代码结构，清晰的代码结构更有利于团队对项目的理解和维护。1.前面我们介绍了一系列基础功能封装，这部分内容可以被不同... 查看详情

vue+typescript基础练习(代码片段)

环境win10 node-v8.9.3vue-cli3.4typescript3.1.5编辑器 vscode目标使用vuecli工具,建立一个项目,使用typescript.并实现基本的路由,组件等功能步骤一.建项目官网文档https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create安装必要的环境,然后... 查看详情

Typescript 本地依赖项（多个项目）

】Typescript本地依赖项（多个项目）【英文标题】：Typescriptlocaldependencies(MultipleProjects)【发布时间】：2017-09-2123:40:09【问题描述】：我是打字稿的新手。我目前正在尝试创建一个相互依赖的项目结构。共有三个项目core、calculator和... 查看详情

MODULE_NOT_FOUND 尝试在 Node JS / TypeScript 项目中的模块之间按目录共享代码

】MODULE_NOT_FOUND尝试在NodeJS/TypeScript项目中的模块之间按目录共享代码【英文标题】：MODULE_NOT_FOUNDtryingtosharecodebydirectorybetweenmodulesinNodeJS/TypeScriptprojects【发布时间】：2021-06-0109:34:18【问题描述】：我已经建立了一个示例项目来演... 查看详情

vscode下搭建typescript编译环境

参考技术ATypescript是微软开发的一个JavaScript的超级。著名前端框架的Angular和HTML5游戏引擎Egret等都选择了Typescript作为编写语言。“工欲善其事，必先利其器”，在学习Typescript语言之前必须要有一个良好的开发环境。这里笔者选... 查看详情

react+typescript项目初始化配置(代码片段)

React+TypeScript项目初始化配置新建项目新建React+TypeScript项目：pnpmcreate@vitejs/app进入项目目录，安装依赖并运行：pnpminstallpnpmdev运行成功项目配置入口文件在src目录下创建bootstrap.tsx文件，并将入口文件的内... 查看详情

vue—项目的目录结构介绍

【Vue】—项目的目录结构介绍 查看详情

typescript学习笔记(代码片段)

最近想先学完typescript再去学习vue3，感觉会比较好~开发环境搭建1.新建目录进入目录输入命令npminit(需要自己配置)或者npminit-y(npm默认配置)2.创建src目录目录结构大致如下utils——存放业务相关的可复用方法tools——存放跟业务无... 查看详情