TypeScript 备忘录：如何在 React 中完美运用？

前言

一直以来，ssh 身边都有很多小伙伴对 TS 如何在 React 中运用有很多困惑，他们开始慢慢讨厌 TS，觉得各种莫名其妙的问题降低了开发的效率。

其实如果运用熟练的话，TS 只是在第一次开发的时候稍微多花一些时间去编写类型，后续维护、重构的时候就会发挥它神奇的作用了，还是非常推荐长期维护的项目使用它的。

其实我一直知道英文版有个不错的备忘录，本来想直接推荐给小伙伴，奈何很多人对英文比较头痛，而它中文翻译的版本点进去竟然是这个景象：

既然如此，就自己动手。结合英文原版里的一些示例进行一些扩展，总结成这篇备忘录。

前置基础

阅读本文的前提条件是：

• 熟悉 React 的使用。
• 熟悉 TypeScript 中的类型知识。
• 本文会侧重使用 React Hook 作为示例，当然大部分类型知识都是通用的。

也就是说，这篇文章侧重点在于 「React 和 TypeScript 的结合」，而不是基础知识，基础知识阅读文档即可学习。

也推荐看我 初中级前端的高级进阶指南 这篇文章中的 React 和 TypeScript 章节，这里不多赘述。

工具

• TypeScript Playground with React：可以在线调试 React + TypeScript，只能调试类型，并不能运行代码
• Stackblitz：云开发工具，可以直接运行 React 代码并且预览
• Create React App TypeScript: 本地用脚手架生成 React + TS 的项目

选择你觉得比较中意的调试工具即可。

组件 Props

先看几种定义 Props 经常用到的类型：

基础类型

type BasicProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** 数组类型 */
  names: string[];
  /** 用「联合类型」限制为下面两种「字符串字面量」类型 */
  status: "waiting" | "success";
};

对象类型

type ObjectOrArrayProps = {
  /** 如果你不需要用到具体的属性 可以这样模糊规定是个对象 ❌ 不推荐 */
  obj: object;
  obj2: {}; // 同上
  /** 拥有具体属性的对象类型 ✅ 推荐 */
  obj3: {
    id: string;