如何更好地组织和存储TypeScript中的interface和types

[Genluo]

前言

随着业务不断迁移到TypeScript中，如何编写可扩展，可维护的类型定义最佳方法是什么？应该如何组织对应TypeScript项目中的types和interface等声明，避免types和interface成为项目中的一种新的复杂度。

方法

1. 全局唯一types.ts文件

通常我们将项目中的类型和接口统一放到一个统一的文件进行维护，如果项目很小，则类型、类、接口的定义很少，如果项目很大，Types.ts文件中看到上百行类型定义也很常见，非常不利于维护。

优点：类型可以进行复用，避免多次编写

缺点：随着项目的迭代，如果不提出多个相似的名称，就不能拥有类型或接口的不同变体

2. 基于组件

基于组件的话，针对每个组件，可以有一个.types.ts,.model.ts文件

src
|--
  |--app
  |--components
      |--car
        |-- car.component.css
        |-- car.component.types.ts
        |-- car.component.html
        |-- car.component.spec.ts
        |-- car.component.ts
        |-- car.module.ts

优点：每个类型有有自己的module，多个组件可以存在相同的类型定义

缺点：存在重复的接口，类型复用比较难

3. 基于模型或基于对象

定义在整个代码库中使用的模型，无论是父组件还是子组件都可以使用相同的模型

src
|--
  |--models
      |-- car.model.ts
      |-- user.model.ts
      |-- brand.model.ts

优点：类型可以进行复用，避免多次编写

缺点：随着项目的迭代，如果不提出多个相似的名称，就不能拥有类型或接口的不同变体

4. 基于类型

另一种可以使用的方法是基于类型的方法。其工作方式是将枚举、类型、接口、类存储在它们自己的文件中。

src
|--
  |--ts
     |--enums
     |   |-- a.enums.ts
     |   |-- b.enums.ts
     |--interfaces
     |   |-- a.interfaces.ts
     |   |-- b.interfaces.ts
     |   |-- c.interfaces.ts
     |   |-- d.interfaces.ts
     |--types
         |-- a.types.ts
         |-- b.types.ts

5. 混合使用

混合方法使用全局和基于组件或模型的方法。这样，您可以将类型和接口存储在项目中通用的全局文件夹中。此外，您可以存储与特定组件、控制器或服务严格相关的特定类型和接口。

推荐

1. TypeScript使用

The TypeScript team uses a file called types.ts : https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts

2. 项目推荐方案

推荐混合使用上述组织TypeScript的interface和types的方法，针对可以复用的interface或者types可以使用唯一的types.ts文件或者基于模型或者基于对象或者基于类型的方式来组件自己的接口定义，针对不可以复用的定义，我们应该尽量保证特定的类型引用应该更接近自己的引用，可以使用基于组件的方案，或者直接将类型编写到文件中，减少维护类型的成本，避免类型导出

参考

1. Organizing and Storing Types and Interfaces
2. How to organize TypeScript interfaces [closed]
3. How to organize all the model interfaces and types in your TypeScript project