5. React中使用TypeScript

完整内容——React中文文档：https://zh-hans.react.dev/learn/typescript

一、 useState

1. 自动推导

通常React会根据传入useState的 默认值 来自动推导类型，不需要显式标注类型。

[value, setValue] = useState(false)

说明：
① value: 限制类型为boolean。
② setValue: 限制参数类型为boolean。

2. 传递泛型参数

useState本身是一个 $\color{red}{泛型函数}$ ，调用时可以传入 具体的自定义类型。

image.png

说明：
① 限制useState函数参数的 初始值 必须满足类型为： User 或 （）=> User
② 限制setUser函数的参数必须满足类型为：User 或 （）=> User 或 undefined

3. 联合类型

不知道状态的初始值时，可以将useState的初始值设置为null，此时可以通过 具体类型联合null 来做显式注解。

image.png

说明：
① 限制useState函数参数的 初始值 可以是 User 或 null
② 限制setUser函数的参数类型可以是 User 或 null

二、props

1. 基础使用

为组件props添加类型，就是给函数组件的 props参数 做类型注解，可以使用 type对象类型 或 interface接口 来做注解。

type Props = { name: string }

function Button(props: Props) {
  return <button>{props.name}</button>
}

说明：
① Button组件只能传入名称为 name 的prop参数，类型为string，且为必填。

2. 为children 属性添加类型

children是一个比较特殊的prop，支持多种不同类型数据的传入，需要通过一个 $\color{red}{内置的ReactNode类型}$ 来做注解。

image.png

说明：
① 注解之后，children可以是多种类型，包括：React.ReactElement、string、number、React.ReactFragment、React.ReactPortal、boolean、null、undefined。

3. 为自定义事件prop添加类型

子组件向父组件传值是通过 自定义事件 完成的。子组件通过 props 获取自定义事件，可以在 子组件内部 给事件添加类型。

type Props =  {
  onHandleClick?: (msg: string) => void // 函数类型
}

function Son(props: Props) {
  const { onHandleClick } = props // 子组件通过props获取到父组件传递的自定义事件
  return <></>
}

function Father1() {
  return <Son onHandleClick={(msg) => {}} /> // 内联写法不需要对参数再做类型注解
}

function Father2() {
  const handleClick=(msg: string)=> {}
  return <Son onHandleClick={handleClick} /> // 非内联写法必须对参数做类型注解
}

说明：
① 子组件内部，规定了onHandleClick事件函数的 参数类型是 string，返回值类型是 void。
② 父组件内部，给子组件绑定自定义函数时，如果是 内联写法 不用再做类型注解；否则需要单独注解匹配的参数类型。
③ 自定义事件的类型注解以 子组件 为准，父组件要跟子组件保持一致。

三、useRef

1. 获取dom

useRef 本身是一个 $\color{red}{泛型函数}$ ，调用时可以传入具体的自定义类型，比如React内置的 HtmlInputeElement 类型。

image.png

2. 引用稳定的存储器

把useRef当成引用稳定的存储器使用的场景，可以通过 $\color{red}{泛型传入联合类型}$ 来做，比如定时器的场景：

image.png

四、内置TypeScript类型

1.React内置TypeScript类型——泛型接口

React.FC、React.FunctionComponent、React.ChangeEventHandler、React.ReactNode、React.ReactElement、React.CSSProperties、React.ComponentProps等。

2. React内置的泛型函数

useState、useRef等。

3. 使用规则

（1）使用 React 或者是 组件库 提供的 内置泛型接口 和 内置泛型函数，我们只需要 $\color{red}{传入自定义类型}$ 即可。
（2）内置TypeScript类型接收到具体的自定义类型后，会把它分配给指定的数据，就能实现 $\color{red}{对某个数据的类型注解}$ 。
（3）比如用箭头函数定义函数组件：const myComponent: React.FC<UserProps> = (props) => {}

5. React中使用TypeScript