TypeScript环境下如何将useState钩子传递给其他React组件并正确定义类型

解决方案 #

useState返回的状态更新函数的标准类型是React内置的Dispatch<SetStateAction<T>>，其中泛型T对应你存储的state类型，这里就是你定义的personType。

具体修改步骤：

1. 先修正personType的基础类型写法：TS中基础类型要使用小写的string，大写String是JS字符串构造函数类型，不符合类型规范：

// App.tsx中修改
type personType = {
  name: string,
  language: string
}

2. 在Header组件中导入React提供的类型，替换setPerson的any类型：

import { personType } from "../../App"
// 用type import导入类型，避免打包冗余
import type { Dispatch, SetStateAction } from "react"

// 提前把props类型抽出来，可读性更高
type HeaderProps = {
  person: personType,
  setPerson: Dispatch<SetStateAction<personType>>
}

const Header = ({person, setPerson}: HeaderProps) => {
  // 原有组件逻辑不变
  const handleTranslate = () => {
    setPerson({name:'john', language:'french'})
  }
  return(
    <div>
      <h1>TYPESCRIPT TEST</h1>
      <button onClick={handleTranslate}>clickMe</button>
      {person.name}
      {person.language}
    </div>
  )
}

export default Header

补充说明

你之前写的setPerson:(personType)=> personType存在两个问题：

• setState更新函数没有返回值，返回类型应为void而非personType
• setState支持两种传参形式：直接传新的状态值、传一个接收旧状态返回新状态的回调函数，你的写法只覆盖了直接传值的场景，没有覆盖回调传值的场景。

如果不想导入React的内置类型，也可以手动写全类型，效果是等价的：

setPerson: (newState: personType | ((prevState: personType) => personType)) => void

内容的提问来源于stack exchange，提问作者julBayonna