How to Organize Your TypeScript Types

如何管理 TypeScript 类型文件？

@ TypeScript

前言

TypeScript 类型定义文件通常就是在全局创个 type.ts 文件并把所有类型丢里头，随处都能引用很方便，但很多专案初期沿用的习惯到了一定规模就会开始混乱，近期也遇到相关的问题因此研究一下一般有哪些方式管理类型文件。

问题

你有看过单一类型文件爆塞几千行的状况吗？如果整个专案的类型定义都堆在同一处，基本等同于不鼓励复用，了解先前定义了什么东西？要去哪儿找？是个问题。

管理手段

方法一：就地定义

如果一个类型定义只被使用在单一文件内，直接定义于该文件内。

Foo.tsx
interface Props {
  foo: string
  bar: number
}


export const MyComponent = (props: Props) => {
  // ...
}

有人习惯在同个位置创建同名的 .types.ts 文件并引入，纯粹偏好问题，我会觉得这样的做法虽然看起来比较干净，但挪动代码时需要多费工夫，不太偏好。

├── Foo.tsx
└── Foo.types.ts

方法二：做最小程度的抽象

如果类型使用于不止一个地方，应该被定义在共享的位置。

src
└── components
    ├── ComponentA.tsx
    ├── ComponentB.tsx
    └── components.types.ts

如果在更广阔的规模如 Monorepo 也是同样的道理，定义在「共享的位置」，也就是 apps 之外共通的 packages。

apps
├── app
├── website
└── docs
packages
├── types
├── src
└── shared.types.ts

总结

很多时候太多东西没必要管理硬添加糟糕的抽象也是问题，像是提升所有类型到最上层好像很方便且感觉有管理到什么，实际很糟糕。抽离程序片段（类型、工具函数）的用意即是鼓励重复使用，太高深或粗浅的分类都会造成负担。

这篇文章主要参考 Matt Pocock 大佬于 TotalTypeScript🔗 的建议：Where To Put Your Types in Application Code - Matt Pocock🔗

你可能也会对之前写的：如何管理工具函数 - WebDong 感兴趣。