iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

React 前端工程師的兩把刷子系列 第 1

[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 的內容:


下一篇
[Day02] TS: 泛型(Generics)能幹嘛?
系列文
React 前端工程師的兩把刷子30
1
Ken Chen
iT邦新手 5 級 ‧ 2021-09-16 22:23:42

ya~~~~感謝分享, 我也想拿到 TS 的刷子!不曉得 PJ 大大接著後面幾天是什麼刷子,期待期待~~

0

感謝 PJ 大大的分享,真的對 Typescript 很不熟,每次遇到 type 錯誤就果斷定成 any 這樣就不會出錯了XD

期待 PJ 大大的文章!!!

pjchender iT邦新手 4 級 ‧ 2021-09-18 15:31:54 檢舉

any@ts-ignore 都是必要的刷子啊!了解限制也要知道怎麼在需要的時候解放限制XDD

要是明天要交差了,還被卡在型別過不了....當然就開金手指XDD

0
TD
iT邦新手 4 級 ‧ 2021-09-17 09:02:12

追起來~~

0
Yenting
iT邦新手 5 級 ‧ 2021-09-17 10:42:42

鐵人賽臻融一

這個隊名取的真好~

pjchender iT邦新手 4 級 ‧ 2021-09-18 15:32:33 檢舉

@Yenting 今年沒有參賽?

我要留言

立即登入留言