TypeScript 推荐的带有模块的项目结构答案

【问题标题】：TypeScript recommended project structure with modulesTypeScript 推荐的带有模块的项目结构
【发布时间】：2019-09-01 01:57:30
【问题描述】：

我是 TypeScript 初学者，但我有 Java 开发经验，我想知道用 TypeScript 编写推荐的文件结构是什么——尤其是在模块方面。

假设我有几个模块：ui.dashboard、ui.models、util.events 和 util.common。

这些模块中的每一个都可能包含多个类。在 Java 中，我将具有以下文件结构（其中 <base> 是项目的基础包，例如 com.my.app）：

src/<base>/ui/dashboard/<file per class>
src/<base>/ui/models/<file per class>
src/<base>/util/events/<file per class> 
src/<base>/util/common/<file per class>`

另一方面，在 TypeScript 中，我看到了完成同一件事的两种主要方法：

扁平化设计：

src/ui.dashboard.js
src/ui.models.js
src/util.events.js
src/util.common.js

这里的每个文件都包含一个包含所有相关类的模块定义。这没关系，但是文件变得庞大且难以管理。

分层设计

在这个设计中，我会像在 Java 中一样组织文件，但是由于 TypeScript（据我所知）不支持跨文件声明模块，我将不得不编写一个 gulp/grunt 任务来组合文件在构建时进入模块。

作为一名 Java 程序员，这看起来更加优雅，但是我失去了一些工具支持，因为模块直到构建时才真正定义，因此对编辑器/IDE 不可见。

推荐的工作方式是什么？

【问题讨论】：

标签： typescript

【解决方案1】：

同时使用 :) ES6 支持命名导出和默认导出，因此可以根据需要使用这两种设计。

由于您所说的原因，项目的整体结构应使用分层设计，但也应根据需要使用扁平模块。特别是对于将被合并到其他代码库中的包。

例如：

src/ui/dashboard/Class1.ts
src/ui/dashboard/Class2.ts
src/ui.dashboard.ts

src/ui/dashboard/Class1.ts 文件如下所示：

export class Class1 {}

src/ui.dashboard.ts 文件如下所示：

import {Class1} from './ui/dashboard/Class1';
import {Class2} from './ui/dashboard/Class2';

export default {
    Class1: Class1,
    Class2: Class2,
    randomFunction: () => {},
}

但是，当有疑问时回退到默认导出。

ECMAScript 6 支持单一/默认导出样式，并为导入默认值提供了最甜美的语法。导入命名导出可以甚至应该稍微不那么简洁。 https://esdiscuss.org/topic/moduleimport#content-0

【讨论】：