[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 是怎麽被建立的，像是

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 其他的文章。

这里顺便推荐「铁人赛臻融一」队友们强得很的内容：

以及好同事们就。很。Pro 的内容：

<<: [第01天]理财达人Mx. Ada-环境准备

>>: Consistency and Consensus (2-2) - Implementing Linearizable