返回返回Redux状态的钩子的Typescript类型

问题描述

我有一个名为useReduxState的钩子，用于执行以下操作以从Redux检索状态：

const STATE_A = useReduxState("STATE_A");

在添加Typescript时遇到了麻烦。

这些是我正在使用的类型：

type TYPE_A = {
  fooA: string,barA: string,}

type TYPE_B = {
  fooB: string,barB: string
}

interface REDUX_STATE {
  STATE_A: TYPE_A,STATE_B: TYPE_B,}

这是该钩子的代码（它使用useSelector包中的react-redux钩子）；

function useReduxState(STATE_NAME: REDUX_STATE_KEYS): REDUX_STATE_VALUES {
  
  const STATE = useSelector((state: REDUX_STATE) : REDUX_STATE_VALUES => state[STATE_NAME]);
  return STATE;

}

我的目标是能够编写如下内容：

const { fooA,barA } = useReduxState("STATE_A");

我想让Typescript知道我可以访问这两个属性fooA and barA，因为它们存在于TYPE_A的类型STATE_A中。

但是我遇到了这些错误：

Property 'fooA' does not exist on type 'REDUX_STATE_VALUES'.ts(2339)
Property 'barA' does not exist on type 'REDUX_STATE_VALUES'.ts(2339)

这是类型REDUX_STATE_VALUES

这似乎是正确的，但是我希望Typescript知道当我将"STATE_A"作为参数传递时，返回类型应该为TYPE_A，因此我可以访问其属性fooA and barA。 "STATE_B"及其类型反之亦然。

我该如何实现？在这种情况下，我应该使用泛型吗？

解决方法

您将需要一个泛型，以便对函数的每次调用都将确定它正在访问哪个字段：

function useReduxState<K extends keyof REDUX_STATE>(STATE_NAME: K): REDUX_STATE[K] {

参数将是一个keyof REDUX_STATE，返回类型将是相应的值，因此当您传递特定的字符串时，它将找出正确的返回类型。

您还需要删除函数上的显式return注释，它将从用法中推断出正确的类型，并且您需要比REDUX_STATE_VALUES更具体的

useSelector((state: REDUX_STATE) => state[STATE_NAME])

,

您是否考虑过使用TypeScript接口映射对象TYPE_A和TYPE_B。

export interface TypeA {
   fooA: string;
   barA: string
}

export interface TypeB {
    fooB:string;
    barB: string
}

在ReduxState接口文件中，导入TypeA和TypeB接口

export interface ReduxState {
   Type_A: TypeA;
   Type_B: TypeB;

}