學了 React 之後的下一步，還能學什麼呢？

在今年的鐵人賽中，想要來分享這一兩年來開始使用的 TypeScript 和 React Testing 這兩把刷子。

為什麼是 TypeScript 和 React Testing 呢？主要是因為我認為有了這兩把刷子，將能夠大幅提升程式的可維護性，前者可以讓接手程式碼的人、甚至是三個月後的自己更容易知道當初寫的程式碼要怎麼用，後者可以避免未來重構或需求修改的時候發生自己意想不到的問題。

學習這些東西不是為了他人也不是為了加薪（很多公司也不會安排額外的時間讓工程師寫測試），而是為了寫出讓自己也更有信心的程式碼。

那麼，就先來聊聊 TypeScript 的部分吧！

在 TypeScript 的部分，筆者並不會從 TypeScript 的基本內容開始寫起，而是著重在如何活用與建立 TypeScript 的型別（Utility Types），因此如果你還沒有 TypeScript 基礎，想要快速有個初步了解的話，可以參考筆者過去寫的「了解這些，更快掌握 TypeScript 在 React 中的使用（Using TypeScript in React）」；如果讀者的時間比較充裕，則可以參考 Maxwell Alexius 在 2020 鐵人賽的冠軍文章 — 「讓 TypeScript 成為你全端開發的 ACE！ 」，看完 Day 15 以前的內容後，相信就能對 TypeScript 的基本型別有很清楚的了解。

這次希望會比較使用輕鬆小品的方式，每天分享一點內容。期望讀者在看完筆者本次鐵人賽的文章後，可以看懂 TypeScript 內建的 utility type 是怎麼被建立的，像是

• Pick 和 Record 為什麼原始碼是這樣：

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

• Exclude 和 Extract 為什麼原始碼是這樣：

type Exclude<T, U> = T extends U ? never : T;

type Extract<T, U> = T extends U ? T : never;

• Parameters 和 ReturnType 為什麼原始碼是這樣：

type Parameters<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => any
  ? P
  : never;

type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any;

最後有機會的話，會在挑 type-fest 中的原始碼，來了解其他開發者是怎麼寫出各種不同的 utility type。

如果讀者對於上面這些 utility type 原本閱讀上就不費吹灰之力的話，那麼這幾天的內容可能對你來說會太過簡單，可以把時間拿去 follow 其他的文章。

這裡順便推薦「鐵人賽臻融一」隊友們強得很的內容：

• Javascript 從寫對到寫好
• 30 天用 JavaScript 刷題刷起來！

以及好同事們就。很。Pro 的內容：

• From State Machine to XState
• 今晚，我想來點 Web 前端效能優化大補帖！
• 前端工程師學習 DevOps 之路