Typescript 动态 useReducer

Question

我正在尝试创建一个可重复使用的useReducer与打字 Hook 。

这是我当前的代码:

type State<T> = {
  data?: T
  isLoading: boolean
  error?: string
}

type Action<T> =
  | { type: "request" }
  | { type: "success"; results: T }
  | { type: "failure"; error: string }

function reducer<T>(state: State<T>, action: Action<T>): State<T> {
  switch (action.type) {
    case "request":
      return { isLoading: true }
    case "success":
      return { isLoading: false, data: action.results }
    case "failure":
      return { isLoading: false, error: action.error }
  }
}

export function useFetchState<T>() {
 return useReducer(reducer<T>, {isLoading: false});
}

正如您所看到的，钩子(Hook)应该用于保存获取状态，但数据应该是动态的，以便它可以在不同的上下文中使用:

const [videoFetch, dispatchVideo] = useFetchState<Video[]>()
const [userFetch, dispatchUser] = useFetchState<User[]>()

我的问题是，表达式 reducer<T>由于错误:(26, 20) TS2345:“boolean”类型的参数无法分配给“Reducer”类型的参数而失败。，但未指定 T ，数据类型未知。

我不确定这种情况在 TypeScript 领域是如何调用的，所以我希望有人可以向我解释，我是否以及如何实现我想要的。

非常感谢。

Answer 1

reducer<T>在语法上并非无效。 reducer只是 reducer 。不存在像 reducer<T> 这样的东西。编译器将其理解为 reducer < T > (比较运算符)，它认为当作为表达式完成时最有可能是 bool 值。这就是为什么它会提示“类型 boolean 的参数不能分配给类型 Reducer 的参数”——编译器在类型 Reducer 的值所在的位置发现一个 bool 值，或者一个 bool 值可疑。 (这只是您的 reducer 变量)应该出现。

不传递泛型参数也是错误的。例如 videoFetch 的类型推断会是错误的:videoFetch推断为State<{}> (在更新的版本中可能是 State<unknown>。不过我对此不是 100% 确定)。

那么泛型参数 T 应该在哪里？实际上是？请注意，类型推断实际上发生在 useReducer 上。 。所以我们只需要手动提供useReducer的正确类型参数即可:

export function useFetchState<T>() {
  return useReducer<Reducer<State<T>, Action<T>>>(reducer, { isLoading: false });
}

在这种情况下，您可以检查 videoFetch 的类型被正确推断。所有其他变量的类型也是如此。