如果你是第一次嘗試使用 TypeScript 來進行開發，然後又不知道從哪裡怎麼開始的話呢，我建議可以先從把現有的 .js 或 .jsx 變成 .ts 或 .tsx 開始（ .vue 的話則是從 <script lang="ts"> 開始囉）。

VSCode 已經內建了 TypeScript 的支援了（如果專案使用 Vue 的話建議安裝 TypeScript Vue Plugin (Volar) 這個 extension） ，如果你習慣其他的編輯器可能要確認一下是否要額外的外掛或設定，然後暫時也不用多去做什麼了。

因為光是這樣就已經可以透過 TypeScript 的 型別推斷 帶來很大的好處，現在大多數的第三方套件也都有型別定義可以帶來很大的方便，還能順便附帶一些 type error 給你慢慢習慣哈。

為 API 的資料建立 Type

再來我覺得幫助很大的，就是嘗試為 API 的回傳值建立 interface 或 type ，這個工作並不困難，因為 API 通常回傳的是 JSON 的格式，並不會有什麼很特別的型別，但卻能夠帶來很大的幫助。

如果回傳值是特定幾種 string 的來表示狀態的，也可以透過 type 來收束指定，在後續做判斷時就不用擔心對比的字串會錯字。

透過枚舉 enum 來明確狀態

而有些時候，我們會需要儲存一些狀態，透過狀態的改變來切換畫面的呈現，而這種情況我會透過 enum 列出所有狀態，後續的操作與判斷也全部透過 enum 來進行。

這樣不但避免了 number 作為狀態代碼時難以理解用意的困難，也避免了 magic string 可能打錯字的風險與難以管理的缺點。

同時也藉此達成一種「有限狀態」，可以讓後續維護時明確的知道可能有哪些狀態。

這是其中一種使用範例：

export enum RoleCode {
  Admin,
  Member,
  Contributor,
}

// 有需要的話可以多建立一個 enum key 的 Type 備用
export type RoleKeys = keyof typeof RoleCode // 'Admin' | 'Member' | 'Contributor'

// 後續相關的判斷都可以像這樣透過 RoleCode 來進行
const checkAdmin = (roleCode: RoleCode) => {
  if (roleCode === RoleCode.Admin) return true
  return false
}