不清楚React Hooks的類型聲明？來(lái)看就對(duì)了
在了解react hooks的類型之前，有必要先了解一下@types、.d.ts文件的概念及作用。
node_modules中的@types是什么？
當(dāng)我們使用第三方npm包的時(shí)候，如果這個(gè)包不是ts編寫，則沒(méi)有導(dǎo)出類型，這時(shí)候如果在ts中導(dǎo)入會(huì)報(bào)錯(cuò)。比如jquery 這時(shí)會(huì)報(bào)錯(cuò)
無(wú)法找到模塊“jquery”的聲明文件嘗試使用 npm i --save-dev @types/jquery (如果存在)，或者添加一個(gè)包含 declare module 'jquery'; 的新聲明(.d.ts
這里提示找不到j(luò)query的類型定義 可以安裝@types/jquery或者在d.ts中自定義類型,大多數(shù)情況我們應(yīng)該使用第一種辦法,如果這個(gè)庫(kù)沒(méi)有@types庫(kù)再使用第二種, 可以在https://microsoft.github.io/TypeSearch/中查找一個(gè)包是否存在types。
types查找規(guī)則
當(dāng)我們使用import xx from時(shí)ts將會(huì)默認(rèn)從./node_modules/@types中獲取類型聲明，具體查找規(guī)則是ts編譯器先在當(dāng)前編譯上下文找jquery的定義,找不到則再去./node_modules/@types中查找。 在本地模塊查找的類型聲明作用域是在模塊，在@types中的類型聲明是全局的。在tsconfig.json中也可以使用typeRoots設(shè)置默認(rèn)路徑 。
模塊types
當(dāng)然在`tsconfig.json`中也可以使用`types`單獨(dú)控制`@types`。`types`指定的包會(huì)被單獨(dú)引入。這樣全局引入就失效了。*.d.ts是什么
@types下存放的文件都是.d.ts開(kāi)頭的文件 對(duì)應(yīng)的npm包js的類型聲明。 在.d.ts文件中聲明的類型或者模塊，在其他文件中不需要使用import導(dǎo)入，可以直接使用，d.ts的類型聲明可以自行編寫也可以使用工具聲明。有2個(gè)工具可以使用微軟的dts-gen，生成單個(gè)文件的聲明dtsmake。值得注意的是如果你使用JSDOC語(yǔ)法 在ts3.7以后是可以通過(guò)命令為js生成.ds文件。具體用法可查看官方文檔。
介紹完前菜，現(xiàn)在開(kāi)始進(jìn)入本文正題。 一起來(lái)看下react hooks相關(guān)的類型聲明吧。在@types/react/index.d.ts文件中。
useContext
`useContext和createContext`是結(jié)合一起使用的useContext定義： function useContext<T>(context:Context<T>):TcreateContext定義： function createContext<T>(defaultValue:T,):Context<T>createContext的返回Context類型的值提供給useContext的參數(shù)。這里泛型T在2個(gè)方法中是一致的，如果不指定 ts會(huì)類型推導(dǎo)出正確的類型。而Context 類型 則是一個(gè)interface
interface Context<T> {
Provider: Provider<T>;
Consumer: Consumer<T>;
displayName?: string | undefined;
}`Provider` 擁有`value`和`children` `Consumer`擁有 `children` 類型都是`ReactNode|undefined`。想想我們這react中使用`Context`傳值 是不是感覺(jué)很熟悉？看懂類型定義 再也不怕忘記api了。useState
定義：function useState<S>(initialState:S| (() =>S)): [S, Dispatch<SetStateAction<S>>]泛型S表示state 是用來(lái)約束initialState類型，也可以傳入返回值是S的方法。useState返回值為2個(gè)元素的元組類型，返回state和更新state的方法。默認(rèn)情況下useState會(huì)根據(jù)傳入類型自動(dòng)推導(dǎo)出S類型。SetStateAction<S>定義了傳入setState的參數(shù)類型。是S類型或者返回S類型值的函數(shù)的聯(lián)合類型。SetStateAction 的定義為： type SetStateAction<S> = S|((prevState:S) =>S)，prevState為上一次的state，聯(lián)合類型暫可以理解成或的關(guān)系。而 Dispatch 表示setState的類型，是一個(gè)沒(méi)有返回值的方法。定義也很簡(jiǎn)單Dispatch ：type Dispatch<A> = (value:A) =>void。 還有useState參數(shù)個(gè)數(shù)為0的情況。上面的類型無(wú)法滿足，所以后面?zhèn)€函數(shù)重載約束沒(méi)有傳入初始值的實(shí)現(xiàn)。function useState<S=undefined>(): [S|undefined, Dispatch<SetStateAction<S|undefined>>];
useRef
定義比較簡(jiǎn)單：function useRef<T>(initialValue:T):MutableRefObject<T>, useRef 返回一個(gè)可變 ref 對(duì)象，其 .current 屬性初始化為傳遞的參數(shù)。MutableRefObject就是一個(gè)包含current：T的接口。值得注意的是 這里同樣用了函數(shù)重載，包括了initialValue沒(méi)有傳或者為null的情況。ref在props中大部分的初始值都為null。 類型聲明中注釋明確指定了如果要使用可變的useRef 則需要在范型參數(shù)中包含| null.
* Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
* of the generic argument.如果我們這樣寫，此時(shí)ref為RefObject類型 RefObject的current被readonly修飾。所以是不可變的。當(dāng)在范型中指定了| null 則根據(jù)函數(shù)重載命中第一種類型，返回MutableRefObject是可變的。
const ref = useRef<number>(null)
ref.current = 2 // 無(wú)法分配到 "current" ，因?yàn)樗侵蛔x屬性。
// 此時(shí)命中的這個(gè)重載的useRef
function useRef<T>(initialValue: T|null): RefObject<T>;useEffect
定義: function useEffect(effect:EffectCallback, deps?:DependencyList):void， EffectCallback是一個(gè)只能返回void|Destructor的函數(shù)類型 用來(lái)處理副作用 。 void表示沒(méi)有返回值 ,但這里并不意味著你賦值一個(gè)有返回值的函數(shù)會(huì)報(bào)錯(cuò)，在一個(gè)返回值為void的函數(shù)你明確返回類型 并不會(huì)報(bào)錯(cuò)。而void真正表示無(wú)論你返回什么？編譯器都不會(huì)使用檢查它。 Destructor 表示析構(gòu)函數(shù)，看下它的定義
declare const UNDEFINED_VOID_ONLY: unique symbol;
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }這里UNDEFINED_VOID_ONLY表示一個(gè)常量類型 unique symbol是symbol的子類型 , 使用unique symbol的變量必須為const，而值為never表示的是那些永不存在的值的類型。 never 類型是那些總是會(huì)拋出異常或根本就不會(huì)有返回值的函數(shù)表達(dá)式或箭頭函數(shù)表達(dá)式的返回值類型。這里使用void和{ [UNDEFINED_VOID_ONLY]: never }作為聯(lián)合類型, 明確約束了effect是不能有返回類型的, 如果明確聲明 則會(huì)報(bào)錯(cuò)。 如果有async修飾函數(shù)默認(rèn)返回promise類型， 所以在useEffect中的effect也同樣不能使用async。deps是可選參數(shù)，作為依賴是一個(gè)只讀數(shù)組。ReadonlyArray是一個(gè)真正的只讀數(shù)組類型，根據(jù)范型來(lái)約束數(shù)組元素類型。它沒(méi)有改變數(shù)組的方法push shift等。
useLayoutEffect
useLayoutEffect類型聲明與useEffect一致。但useLayoutEffect的callback會(huì)在DOM更新后同步觸發(fā) 在瀏覽器同步刷新之前執(zhí)行完成 可能會(huì)阻塞瀏覽器渲染。
useReducer
官方介紹useReducer 為 An alternative to useState.是useState的替代解決方案。一般我們都這樣使用。當(dāng)state結(jié)構(gòu)或邏輯比較復(fù)雜時(shí)，用useReducer管理更方便容易。
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, {count: 0});
state.count
dispatch({type: 'decrement'})在類型聲明文件中useReducer寫了5個(gè)重載函數(shù)類型。
type ReducerWithoutAction<S> = (prevState: S) => S;
type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> =
R extends ReducerWithoutAction<infer S> ? S : never;
function useReducer<R extends ReducerWithoutAction<any>, I>(
reducer: R,
initializerArg: I,
initializer: (arg: I) => ReducerStateWithoutAction<R>
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];- 第一種是reducer函數(shù)沒(méi)有傳action的情況。R表示reducer函數(shù)類型, 其中參數(shù)state類型和返回類型必須一致。initializerArg表示初始參數(shù)，類型為泛型的第二個(gè)參數(shù)。initializer定義稍微復(fù)雜，但是其實(shí)約束了此類型必須是一個(gè)參數(shù)為initializerArg類型 返回值也同initializerArg類型一致的參數(shù)類型。而這個(gè)initializerArg就是reducer的參數(shù)state類型。ReducerStateWithoutAction就是為了約束這三個(gè)參數(shù)的類型。舉個(gè)例子更清晰. 下述代碼reducer中state initializerArg 已經(jīng) initializer的參數(shù)和返回參數(shù)類型都應(yīng)該保持一致。
type stateType = {num: number}
function reducer(state: stateType) {
return state
}
const [state,dispatch]=useReducer<typeof reducer,stateType>(
reducer, {num: 0},state=>{
return {num: state.num+1}
})這里的extends 條件類型是一種條件表達(dá)式進(jìn)行類型的關(guān)系檢測(cè)，類似于三元表達(dá)式。意思為左側(cè)類型可分配給右側(cè)類型則返回？后面的類型 否則返回：后的類型。 而infer關(guān)鍵字只能出現(xiàn)在條件類型extends 判斷為true的分支，表示一個(gè)待推斷的類型，infer S表示將推斷的類型保存在S中。
- 第二個(gè)重載與第一個(gè)類似 只是在initializer為undefined的情況。如果在useReducer的泛型中指定了第二個(gè)參數(shù)，則命中第一個(gè)重載 此時(shí)會(huì)報(bào)錯(cuò)。具體實(shí)現(xiàn)類似下述代碼。
function useReducer<R extends ReducerWithoutAction<any>>(
reducer: R,
initializerArg: ReducerStateWithoutAction<R>,
initializer?: undefined
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
type stateType = {num: number}
function reducer(state: stateType) {
return state
}
const [state,dispatch]=useReducer<typeof reducer>(
reducer, {num: 0})- 第三個(gè)重載約束了reducer函數(shù)傳入action的情況，不同于redux action是any類型。initializerArg初始參數(shù)為 state與泛型I的交叉類型。I可能是state的子集的情況。ReducerState同樣是為了取出reducer中state類型。initializer同上述第一種重載類似。要約束arg initializerArg 一致。而初始initializer的返回值要與reducer中state一致。
// Unlike redux, the actions _can_ be anything
type Reducer<S, A> = (prevState: S, action: A) => S;
// types used to try and prevent the compiler from reducing S
// to a supertype common with the second argument to useReducer()
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
function useReducer<R extends Reducer<any, any>, I>(
reducer: R,
initializerArg: I & ReducerState<R>,
initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];舉個(gè)例子 初始參數(shù)initializer的state類型 在初始函數(shù)的參數(shù)類型也應(yīng)該一致。
// 代碼實(shí)現(xiàn)
type stateType = {num: number}
type actionType = { type: string, payload: number}
function reducer(state: stateType,action: actionType) {
if(action.type=='add'){
return {num: state.num+1}
}else {
return {num: state.num-1}
}
}
const [state,dispatch]=useReducer<typeof reducer,actionType>(
reducer, { type: 'add', payload: 1,num: 2},state=>{
return {num:state.num+state.payload}
})- 第4個(gè)重載 和第三個(gè)類似 在初始參數(shù)不包括state的情況， 初始參數(shù)initializer的state類型 在初始函數(shù)的參數(shù)類型也應(yīng)該一致。
function useReducer<R extends Reducer<any, any>, I>(
reducer: R,
initializerArg: I,
initializer: (arg: I) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];第5個(gè)重載 和上述類似 約束了initializer為undefined,reducer存在actions的情況
function useReducer<R extends Reducer<any, any>>(
reducer: R,
initialState: ReducerState<R>,
initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];useReducer的返回值都是一致。返回reducerState和Dispatch，而type Dispatch<A> = (value:A) =>void;就是一個(gè)沒(méi)有返回值的函數(shù) 用來(lái)觸發(fā)action 改變r(jià)educerState。
useCallback
定義比較簡(jiǎn)單：function useCallback<T extends (...args:any[]) =>any>(callback:T, deps:DependencyList):T;范型T為function類型為第一個(gè)參數(shù)callback的類型，第二個(gè)參數(shù)DependencyList與useEffect的依賴數(shù)組一致，都是一個(gè)只讀的數(shù)組。主要作用是用來(lái)緩存callback實(shí)例，當(dāng)傳遞給子組件方法時(shí)與React.memo 或者shouldComponentUpdate一起使用。
useMemo
定義也比較簡(jiǎn)單：
// allow undefined, but don't make it optional as that is very likely a mistake
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;范型T為factory的返回值類型。deps依賴為DependencyList和undefined的聯(lián)合類型，這里會(huì)有提示允許deps為undefined，但不能是可選的 否則可能是個(gè)錯(cuò)誤。
useImperativeHandle
useImperativeHandle主要用來(lái)配合forwardRef自定義暴露給父組件數(shù)據(jù)的。一般用來(lái)父組件調(diào)用子組件方法或獲取子組件數(shù)據(jù)時(shí)使用。
function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
interface RefObject<T> {
readonly current: T | null;
}
// Bivariance hack for consistent unsoundness with RefObject
type RefCallback<T> = { bivarianceHack(instance: T | null): void }["bivarianceHack"];
type Ref<T> = RefCallback<T> | RefObject<T> | null;泛型T為ref的current的類型，R是第二個(gè)參數(shù)init方法的返回值，DependencyList同上述依賴數(shù)組一樣 不可變數(shù)組。可以這樣使用
const Child = React.forwardRef<{num: number}>((prop,ref)=>{
useImperativeHandle<{num: number}, {num: number}>(ref,()=>({
'num': 1
}))
return (<div>123</div>)
})
const Foo = ()=>{
const childRef = useRef<{num: number}|null>(null)
useLayoutEffect(() => {
console.log(childRef.current?.num) // 1
}, [])
return <>
<Child ref={childRef}/>
</>
}總結(jié)
本文根據(jù)閱讀@types/react下hook相關(guān)源碼入手，意在幫助大家熟悉常用hook以及類型聲明，在開(kāi)發(fā)時(shí)能得心應(yīng)手，明白hooks的約束條件，更深入理解hook的功能。
