完整內(nèi)容——React中文文檔：https://zh-hans.react.dev/learn/typescript

一、 useState

1. 自動(dòng)推導(dǎo)

通常React會(huì)根據(jù)傳入useState的 默認(rèn)值 來(lái)自動(dòng)推導(dǎo)類型，不需要顯式標(biāo)注類型。

[value, setValue] = useState(false)

說(shuō)明：
① value: 限制類型為boolean。
② setValue: 限制參數(shù)類型為boolean。

2. 傳遞泛型參數(shù)

useState本身是一個(gè) ，調(diào)用時(shí)可以傳入 具體的自定義類型。

image.png

說(shuō)明：
① 限制useState函數(shù)參數(shù)的 初始值 必須滿足類型為： User 或 （）=> User
② 限制setUser函數(shù)的 參數(shù) 必須滿足類型為：User 或 （）=> User 或 undefined

3. 聯(lián)合類型

不知道狀態(tài)的初始值時(shí)，可以將useState的初始值設(shè)置為null，此時(shí)可以通過(guò) 具體類型聯(lián)合null 來(lái)做顯式注解。

image.png

說(shuō)明：
① 限制useState函數(shù)參數(shù)的 初始值 可以是 User 或 null
② 限制setUser函數(shù)的 參數(shù) 類型可以是 User 或 null

二、props

1. 基礎(chǔ)使用

為組件props添加類型，就是給函數(shù)組件的 props參數(shù) 做類型注解，可以使用 type對(duì)象類型 或 interface接口 來(lái)做注解。

type Props = { name: string }

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

說(shuō)明：
① Button組件只能傳入名稱為 name 的prop參數(shù)，類型為string，且為必填。

2. 為children 屬性添加類型

children是一個(gè)比較特殊的prop，支持多種不同類型數(shù)據(jù)的傳入，需要通過(guò)一個(gè) 來(lái)做注解。

image.png

說(shuō)明：
① 注解之后，children可以是多種類型，包括：React.ReactElement、string、number、React.ReactFragment、React.ReactPortal、boolean、null、undefined。

3. 為自定義事件prop添加類型

子組件向父組件傳值是通過(guò) 自定義事件 完成的。子組件通過(guò) props 獲取自定義事件，可以在 子組件內(nèi)部 給事件添加類型。

type Props =  {
  onHandleClick?: (msg: string) => void // 函數(shù)類型
}

function Son(props: Props) {
  const { onHandleClick } = props // 子組件通過(guò)props獲取到父組件傳遞的自定義事件
  return <></>
}

function Father1() {
  return <Son onHandleClick={(msg) => {}} /> // 內(nèi)聯(lián)寫法不需要對(duì)參數(shù)再做類型注解
}

function Father2() {
  const handleClick=(msg: string)=> {}
  return <Son onHandleClick={handleClick} /> // 非內(nèi)聯(lián)寫法必須對(duì)參數(shù)做類型注解
}

說(shuō)明：
① 子組件內(nèi)部，規(guī)定了onHandleClick事件函數(shù)的 參數(shù)類型是 string，返回值類型是 void。
② 父組件內(nèi)部，給子組件綁定自定義函數(shù)時(shí)，如果是 內(nèi)聯(lián)寫法 不用再做類型注解；否則需要單獨(dú)注解匹配的參數(shù)類型。
③ 自定義事件的類型注解以 子組件 為準(zhǔn)，父組件要跟子組件保持一致。

三、useRef

1. 獲取dom

useRef 本身是一個(gè) ，調(diào)用時(shí)可以傳入具體的自定義類型，比如React內(nèi)置的 HtmlInputeElement 類型。

image.png

2. 引用穩(wěn)定的存儲(chǔ)器

把useRef當(dāng)成引用穩(wěn)定的存儲(chǔ)器使用的場(chǎng)景，可以通過(guò) 來(lái)做，比如定時(shí)器的場(chǎng)景：

image.png

四、內(nèi)置TypeScript類型

1.React內(nèi)置TypeScript類型——泛型接口

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

2. React內(nèi)置的泛型函數(shù)

useState、useRef等。

3. 使用規(guī)則

（1）使用 React 或者是 組件庫(kù) 提供的 內(nèi)置泛型接口 和 內(nèi)置泛型函數(shù)，我們只需要 即可。
（2）內(nèi)置TypeScript類型接收到具體的自定義類型后，會(huì)把它分配給指定的數(shù)據(jù)，就能實(shí)現(xiàn) 。
（3）比如用箭頭函數(shù)定義函數(shù)組件：const myComponent: React.FC<UserProps> = (props) => {}