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 感興趣。