從 React V 16.8.0 和 React Native 0.59.0 版本開(kāi)始, 引入了React Hook的概念。React Hook 在開(kāi)發(fā)支持就考慮到了類型，所以很多Hook函數(shù)可以直接推斷出他們的參數(shù)、返回值等類型，但也有一些場(chǎng)景需要我們顯示聲明類型。閱讀本文前你需要了解React Hook 的基本用法，參考這里。下面會(huì)總結(jié)一下我們?nèi)绾卧?TypeScript 中使用React Hook。

useState

大多數(shù)情況下，useState 的類型可以從初始化值推斷出來(lái)。但當(dāng)我們初始化值為 null、undefined或者對(duì)象以及數(shù)組的時(shí)候，我們需要制定useState的類型。

// 可以推斷 age 是 number類型
const [age, setAge] = useState(20);

// 初始化值為 null 或者 undefined時(shí)，需要顯示指定 name 的類型
const [name, setName] = useState<string>();

// 初始化值為一個(gè)對(duì)象時(shí)
interface People {
    name: string;
    age: number;
    country?: string;
}
const [owner, setOwner] = useState<People>({name: 'rrd_fe', age: 5});

// 初始化值是一個(gè)數(shù)組時(shí)
const [members, setMembers] = useState<People[]([]);

useEffect

useEffect 用來(lái)在組件完成渲染之后增加副作用(side effect)，可以返回一個(gè)函數(shù)，用來(lái)做一些狀態(tài)還原、移除listener等 clean up的操作。不需要處理返回值，所以可以不指定他的類型。useLayoutEffect類似。

useEffect(() => {
    const listener = addEventListener(name, callback);
    return () => {
        removeEventListener(listener)
    }
}, [name, callback]);

useMemo、useCallback

對(duì)于 useMemo 和 useCallback 我們可以從函數(shù)的返回值中推斷出來(lái)他們返回的類型，需要顯示指定。

const age = 12;
// 推斷 doubleAge 是 number類型
const doubleAge = useMemo(() => {
    return age * 2;
}, [age]);

// 推斷 addTen 類型是 (initValue: number) => number
const addTen = useCallback((initValue: number) => {
    return initValue + 10;
});

useRef

useRef 有兩種比較典型的使用場(chǎng)景：

場(chǎng)景一： 和 hook 之前的 ref 類似，用來(lái)關(guān)聯(lián)一個(gè) Dom節(jié)點(diǎn)或者 class component 實(shí)例，從而可以直接操作 Dom節(jié)點(diǎn) 或者class component 的方法。 通常會(huì)給 ref 的 readonly 屬性 current 初始化為 null，直到 ref 關(guān)聯(lián)到組件上。 通常我們需要指定 useRef 的類型，參考如下:

const RRDTextInput = () => {
    const inputRef = useRef<TextInput>(null);
    return <TextInput ref={inputRef} placeholder="人人貸大前端" />;
}

場(chǎng)景二：使用 ref 替代 class component 中的實(shí)例屬性，這種場(chǎng)景我們可以從初始化值中推斷出類型，current 也是可修改的。

// 推斷 current 是 number 類型
const age = useRef(2);

useReducer

useReducer 可以認(rèn)為是簡(jiǎn)配版的redux，可以讓我們把復(fù)雜、散落在四處的useState，setState 集中到 reducer中統(tǒng)一處理。類似我們同樣可以從reducer 函數(shù)(state邏輯處理函數(shù))中推斷出useReducer 返回的 state 和 dispatch 的 action類型，所以無(wú)需在顯示的聲明，參考如下實(shí)例：

type ReducerAction =
    | { type: 'switchToSmsLogin' | 'switchToAccountLogin' }
    | {
        type: 'changePwdAccount' | 'changeSmsAccount';
        payload: {
            actualAccount: string;
            displayAccount: string;
        };
    };

interface AccountState {
    loginWithPwd: boolean;
    pwdActualAccount: string;
    pwdDisplayAccount: string;
    smsActualAccount: string;
    smsDisplayAccount: string;
}

function loginReducer(loginState: AccountState, action: ReducerAction): AccountState {
    switch (action.type) {
        case 'switchToAccountLogin':
            return {
                ...loginState,
                pwdActualAccount: loginState.smsActualAccount,
                pwdDisplayAccount: loginState.smsDisplayAccount,
                loginWithPwd: !loginState.loginWithPwd,
            };
        // 密碼登陸頁(yè)賬號(hào)發(fā)生變化
        case 'changePwdAccount':
            return {
                ...loginState,
                pwdActualAccount: action.payload.actualAccount,
                pwdDisplayAccount: action.payload.displayAccount,
            };
        default:
            return loginState;
    }
}

// 可以從 loginReducer 推斷出
// loginState 的類型 滿足 AccountState interface
// dispatchLogin 接受的參數(shù)滿足 ReducerAction 類型
const [loginState, dispatchLogin] = useReducer(loginReducer, initialState);

dispatchLogin({ type: 'switchToAccountLogin' });
dispatchLogin({
    type: 'changePwdAccount',
    payload: {
        actualAccount,
        displayAccount,
    },
});

// 錯(cuò)誤： 不能將 logout 類型賦值給 type
dispatchLogin({ type: 'logout' });
// 錯(cuò)誤： { type: 'changePwdAccount' } 類型缺少 payload屬性
dispatchLogin({ type: 'changePwdAccount' });

useImperativeHandle

useImperativeHandle 是 hook 中提供的允許我們 ref 一個(gè)function component 的方案，也是 Hook 在 TypeScript 中使用最復(fù)雜的場(chǎng)景。 我們先來(lái)看下面的Demo，一個(gè)RN轉(zhuǎn)盤(pán)組件：

// 第一步：定義轉(zhuǎn)盤(pán)抽獎(jiǎng)組件對(duì)外暴露的接口 start、stop
export interface WheelHandles {
    startLottery(): void;
    stopLottery(
        luckyIndex: number,
        stopCallback: () => void,
    ): void;
}

// 第二步：將轉(zhuǎn)盤(pán)組件聲明為 RefForwardingComponent 類型， 可以接受一個(gè) ref props
// ref props 是通過(guò) forwarding-refs 實(shí)現(xiàn) https://reactjs.org/docs/forwarding-refs.html
const PrizeWheel: RefForwardingComponent<WheelHandles, Props> = (props, ref): => {

    function startLottery(): void {
        // 開(kāi)始抽獎(jiǎng)邏輯
    }

    function stopLottery(luckyIndex: number, stopCallback: () => void): void {
        // 停止抽獎(jiǎng)邏輯
    }

    // 第三步： 通過(guò) useImperativeHandle 實(shí)現(xiàn)對(duì)外提供預(yù)定義好的接口
    // useImperativeHandle 的 第一個(gè) ref 參數(shù)， 我們可以從useRef(第四步會(huì)用到)推斷出來(lái)
    // 第二個(gè)函數(shù) return 內(nèi)容， 可以從 WheelHandles推斷出 不需要顯示聲明 
    // 例如： 我們?nèi)绻粚?shí)現(xiàn)的 startLottery， TypeScript 編譯期間就會(huì)報(bào)錯(cuò)
    useImperativeHandle(ref, () => {
        return {
            startLottery,
            stopLottery,
        };
    });

    return (
        // 抽獎(jiǎng)組件
    )
}

// 第四步 useRef 引用轉(zhuǎn)盤(pán)對(duì)象， 并調(diào)用 startLottery 開(kāi)始抽獎(jiǎng)
const lotteryRef = useRef<PrizeWheelHandles>(null);

<PrizeWheel
    ref={lotteryRef}
    data={lotteryInfo}
/>

lotteryRef.current.startLottery();

其他

useContext、useDebugValue 暫時(shí)沒(méi)有用到，后續(xù)在補(bǔ)充。