Skip to main content

[Day01] 學了 React 後的下一步?準備好兩把刷子!

學了 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 是怎麼被建立的,像是

  • PickRecord 為什麼原始碼是這樣:
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};

type Record<K extends keyof any, T> = {
[P in K]: T;
};
  • ExcludeExtract 為什麼原始碼是這樣:
type Exclude<T, U> = T extends U ? never : T;

type Extract<T, U> = T extends U ? T : never;
  • ParametersReturnType 為什麼原始碼是這樣:
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 其他的文章。

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

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