TS + React 最小知识点常用的 React 类型 React.FC Function Component 函数式

常用的 React 类型

React.FC Function Component 函数式组件
React.PropsWithChildren 让 props.children 带类型
React.HTMLAttributes 让 props 可以使用 html 属性比如 className
React.CSSProperties 行内的 css 类型
React.ReactNode Node 节点类型

写个案例

import { FC, PropsWithChildren } from 'react'

const Hello: FC<PropsWithChildren<{ name: string }>> = ({ name, children }) => {
  return (
    <div>
      Hello {name}
      {children}
    </div>
  )
}

常用的 TS 工具泛型

Record<string, any> // 字典类型，描述 key，value

Omit<{a: string; b: number}, 'a'> // 剔除指定类型，第二个参数可以是联合类型，比如 'a' | 'b'
Pick<{a: string; b: number}, 'a'> // 用法和 Omit 一样，用来选取指定的类型

Omit，Pick 这两个泛型比较常用，一般用在组合多个类型的时候用，比如实现一个类型合并的泛型

type MergeType<A, B> = Omit<A, keyof B> & B

实际工作中 Omit 会用的更多一点，比如继承一个类型，需要修改这个父类的属性，则必须先使用 Omit 剔除

下面几个工具泛型了解就好，用的比较少。

Partial<T> // 类型属性变成可选
Required<T> // 类型属性变成必选
Readonly<T> // 类型属性变成只读
NonNullable<T> // 去掉类型为 null 或者 undefined 的属性
Parameters<T> // 获取函数的参数类型
ReturnType<T> // 获取函数的返回值类型

再说几个 TS 的小技巧

// 获取对象属性的类型
type Demo = {a: string}
Demo['a'] // => string

// 获取数组值的类型
type ArrayType = string[]
ArrayType[number] // => string，如果不知道数组的类型可以用 typeof 返回

// 约束已知的属性，剩下的随便
type O = {
    a: string;
    [key: string]: any
}

怎么上手依赖包的类型

很多开源库，文档基本都是讲解 Api 如何使用，很少会有库对应的类型如何使用，我的思路一般都是先看官方的案例，看看有没有 TS 相关的，然后去 Github 看他的测试代码，很多测试代码都是 TS 写的，最后再看开源库的类型文件，这样下来基本就知道怎么使用了

我用常见的组件库为案例分享几个用法

// ⚠️
const onFinish = (data: Data) => {}

// ✔️
const onFinish: FormProps['onFinish'] = (data) => {}
<Form onFinish={onFinish} />

通常我们声明方法的时候，会不自觉的给参数加类型，但是很多常见的组件库，方法的参数类型都没有导出，当然我们可以使用 Parameters 来解决，但是不优雅，正确的做法是直接取组件 Props 类型对应的属性类型

几乎所有的开源组件都是这个套路

学习资料

最后一点建议，一定要多看看开源库的类型文件，能加深对这个库的使用，还能学习到不少 TS 的用法