基于Vite創(chuàng)建開(kāi)發(fā)環(huán)境

Vite是一個(gè)框架無(wú)關(guān)的前端工具鏈，可以快速的生成一個(gè) React + TS 的開(kāi)發(fā)環(huán)境，并且可以提供快速的開(kāi)發(fā)體驗(yàn)

npm create vite@latest react-ts-pro -- --template react-ts

說(shuō)明：

1. npm create vite@latest 固定寫(xiě)法 （使用最新版本vite初始化項(xiàng)目）
2. react-ts-pro 項(xiàng)目名稱 （可以自定義）
3. -- --template react-ts 指定項(xiàng)目模版位react+ts

useState與TypeScript

useState-自動(dòng)推導(dǎo)

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

image.png

說(shuō)明：

1. value: 類型為boolean
2. toggle: 參數(shù)類型為boolean

useState-傳遞泛型參數(shù)

useState本身是一個(gè)泛型函數(shù)，可以傳入具體的自定義類型

image.png

說(shuō)明：

1. 限制useState函數(shù)參數(shù)的初始值必須滿足類型為： User | （）=> User
2. 限制setUser函數(shù)的參數(shù)必須滿足類型為：User | （）=> User | undefined
3. user狀態(tài)數(shù)據(jù)具備User類型相關(guān)的類型提示

useState-初始值為null

當(dāng)我們不知道狀態(tài)的初始值是什么，將useState的初始值為null是一個(gè)常見(jiàn)的做法，可以通過(guò)具體類型聯(lián)合null來(lái)做顯式注解

image.png

說(shuō)明：

1. 限制useState函數(shù)參數(shù)的初始值可以是 User | null
2. 限制setUser函數(shù)的參數(shù)類型可以是 User | null

事件與TypeScript

事件與TypeScript - 為事件回調(diào)添加類型

為事件回調(diào)添加類型約束需要使用React內(nèi)置的泛型函數(shù)來(lái)做，比如最常見(jiàn)的鼠標(biāo)點(diǎn)擊事件和表單輸入事件：

image.png

說(shuō)明：通過(guò)泛型函數(shù)約束了整個(gè)事件回調(diào)函數(shù)的類型，主要是為了約束事件參數(shù)e的類型

Props與TypeScript

props與TypeScript - 基礎(chǔ)使用

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

image.png

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

props與TypeScript - 為children添加類型

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

image.png

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

props與TypeScript - 為事件prop添加類型

組件經(jīng)常執(zhí)行類型為函數(shù)的prop實(shí)現(xiàn)子傳父，這類prop重點(diǎn)在于函數(shù)參數(shù)類型的注解

image.png

說(shuō)明：

1. 在組件內(nèi)部調(diào)用時(shí)需要遵守類型的約束，參數(shù)傳遞需要滿足要求
2. 綁定prop時(shí)如果綁定內(nèi)聯(lián)函數(shù)直接可以推斷出參數(shù)類型，否則需要單獨(dú)注解匹配的參數(shù)類型

useRef與TypeScript

useRef與TypeScript - 獲取dom

獲取dom的場(chǎng)景，可以直接把要獲取的dom元素的類型當(dāng)成泛型參數(shù)傳遞給useRef,可以推導(dǎo)出.current屬性的類型

image.png

useRef與TypeScript - 引用穩(wěn)定的存儲(chǔ)器

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

image.png