一文带你搞懂react hooks的类型声明

• 第一种是reducer函数没有传action的情况。R表示reducer函数类型, 其中参数state类型和返回类型必须一致。initializerArg表示初始参数，类型为泛型的第二个参数。initializer定义稍微复杂，但是其实约束了此类型必须是一个参数为initializerArg类型 返回值也同initializerArg类型一致的参数类型。而这个initializerArg就是reducer的参数state类型。ReducerStateWithoutAction就是为了约束这三个参数的类型。举个例子更清晰. 下述代码reducer中state initializerArg 已经 initializer的参数和返回参数类型都应该保持一致。

type stateType = {num: number}
function reducer(state: stateType) {
  return state
}
const [state,dispatch]=useReducer(
  reducer, {num: 0},state=>{
    return {num: state.num+1}
  })

这里的extends 条件类型是一种条件表达式进行类型的关系检测，类似于三元表达式。意思为左侧类型可分配给右侧类型则返回？后面的类型 否则返回：后的类型。 而infer关键字只能出现在条件类型extends 判断为true的分支，表示一个待推断的类型，infer S表示将推断的类型保存在S中。

• 第二个重载与第一个类似 只是在initializer为undefined的情况。如果在useReducer的泛型中指定了第二个参数，则命中第一个重载 此时会报错。具体实现类似下述代码。

function useReducer>(
        reducer: R,
        initializerArg: ReducerStateWithoutAction,
        initializer?: undefined
    ): [ReducerStateWithoutAction, DispatchWithoutAction];
type stateType = {num: number}
function reducer(state: stateType) {
  return state
}
const [state,dispatch]=useReducer(
reducer, {num: 0})

• 第三个重载约束了reducer函数传入action的情况，不同于redux action是any类型。initializerArg初始参数为 state与泛型I的交叉类型。I可能是state的子集的情况。ReducerState同样是为了取出reducer中state类型。initializer同上述第一种重载类似。要约束arg initializerArg 一致。而初始initializer的返回值要与reducer中state一致。

// Unlike redux, the actions _can_ be anything
type Reducer = (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 ? S : never;
function useReducer, I>(
        reducer: R,
        initializerArg: I & ReducerState,
        initializer: (arg: I & ReducerState) => ReducerState
    ): [ReducerState, Dispatch>];

举个例子 初始参数initializer的state类型 在初始函数的参数类型也应该一致。

// 代码实现
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(
reducer, { type: 'add', payload: 1,num: 2},state=>{
  return {num:state.num+state.payload}
})

• 第4个重载 和第三个类似 在初始参数不包括state的情况， 初始参数initializer的state类型 在初始函数的参数类型也应该一致。

function useReducer, I>(
        reducer: R,
        initializerArg: I,
        initializer: (arg: I) => ReducerState
    ): [ReducerState, Dispatch>];

第5个重载 和上述类似 约束了initializer为undefined,reducer存在actions的情况

function useReducer>(
        reducer: R,
        initialState: ReducerState,
        initializer?: undefined
    ): [ReducerState, Dispatch>];