【问题标题】:Type SomeType[number] is not assignable to SomeType[number] ... hmm?类型 SomeType[number] 不能分配给 SomeType[number] ...嗯?
【发布时间】:2021-08-18 15:15:26
【问题描述】:

我正在构建一个函数,它将接受一个简单的配置并返回一组完全类型化的 Redux 'actionCreators'。

该函数正在运行,当我使用返回的 actionCreators 时,我得到了正确的类型检查和自动完成功能。但是,Typescript 对其中一个细节不满意,我正在努力找出原因。

请注意 - 这是一项正在进行的工作,因此您可能会看到一些可以清理的外围事物,但我的问题实际上只是关于 Typescript 正在捕获的错误。

首先我要设置几个类型 - 这些只是定义将提供给 actionCreators 工厂的 TypeConfig 的类型。

interface GenericPayloads {
    [key: number]: any;
}

enum GenericEnum {};
type Enum = typeof GenericEnum;

interface GenericTypeConfig {
    payloads: GenericPayloads;
    actionTypes: Enum;
}

然后是一个通用接口,它创建一个接口,其中包含 actionCreators 需要键入的 ActionTypes 和 Payload 类型:

interface Config<ActionTypes extends Enum, Payloads extends GenericPayloads> {
    payloads: Payloads;
    actionTypes: ActionTypes;
};

最后是一个通用接口,该接口将通过 Config 接口传递给通用函数(我将很快介绍)以创建一个接口,该接口表示参数中预期的配置类型:

interface ConfigAsParams<Config extends GenericTypeConfig> {
    actionTypes: Config['actionTypes'];
}

然后使用工厂,我简单地定义动作类型和有效载荷如下(这些只是一些随机动作类型的例子):

enum actionTypes {
    'DO_ACTION',
    'DO_ANOTHER_ACTION',
    'DO_FINAL_ACTION'
};

interface Payloads {
    [actionTypes.DO_ACTION]: {value: string};
    [actionTypes.DO_ANOTHER_ACTION]: {complete: boolean};
    [actionTypes.DO_FINAL_ACTION]: undefined;
};

type MyTypeConfig = TypeConfig<typeof actionTypes, Payloads>;

几个快速的辅助函数:

const getKeys = Object.keys as <T extends Enum>(obj: T) => Array<keyof T>;

const getNumericEnumValue = <T extends Enum>(obj: T, key: keyof T): {string: false} | {string:true,value: number} => {

    if (!isNaN(Number(key))) return {
        string: false
    };

    const value = obj[key];

    return {
        string: true,
        value: value as unknown as number
    }

} 

最后是函数:

function actionFactory<Config extends GenericTypeConfig>(config: ValuesConfig<Config>) {

    const createActions = () => {

        type ActionCreators = {
            [P in keyof Config['payloads']]: (payload: Config['payloads'][P]) => {type: Config['actionTypes'][P], payload: typeof payload};
        }

        const actionCreators: Partial<ActionCreators> = {};

        for (const key of getKeys(config.actionTypes)) {

                const enumIdx = getNumericEnumValue(config.actionTypes, key);

                if (!enumIdx.string) continue;

                const keyAsString = key as string;

                const actionCreator: ActionCreators[number] = ((payload) => ({type: keyAsString, payload}));

                actionCreators[enumIdx.value] = actionCreator; // Typescript complains here
                
        };

        return actionCreators as ActionCreators; 
    }

    return createActions;
    
}

这个函数按预期工作,例如我可以如下使用它:

const test = actionFactory<MyTypeConfig>({actionTypes});

const actionCreators = test();

const action = actionCreators ? actionCreators[actionTypes.DO_ACTION]({value: 'hello'}) : null;

我得到完全自动完成,如果我尝试传递无效的有效负载,Typescript 会抱怨,这是我想要的,并返回正确的操作。但我就是不明白为什么会出错。

如果我按上述方式编写函数,则会出现此错误:

Type '(payload: Config["payloads"][number]) => { type: Config["actionTypes"][number]; payload: Config["payloads"][number]; }' is not assignable to type 'ActionCreators[number]'.ts(2322)

但更令人困惑的是,如果我专门创建以下类型

type ActionCreator = ActionCreators[number];

然后将其分配给actionCreator...

const actionCreator: ActionCreator = ((payload) => ({type: keyAsString, payload}));

我收到以下错误:

Type 'ActionCreator' is not assignable to type 'ActionCreators[number]'.ts(2322)

一定是我需要在某个地方采取额外的步骤来让 Typescript 放心,但我对泛型还很陌生,所以我很难看到它。

希望有人能指出正确的方向

【问题讨论】:

  • 看起来你可能在某种程度上重新发明了许多已经在官方 Redux 工具包中可用的东西。以防万一——你可能想看看它是否解决了你的问题,然后再深入了解它——它提供了非常强大的 TypeScript 支持。
  • 感谢@phry 的提示,我会看看!

标签: typescript redux typescript-generics


【解决方案1】:

啊,我解决了。

我试图为函数分配一种类型...

ActionCreators[number]

...到具有...类型的 actionCreators 对象

Partial<ActionCreators>.

为了解决这个问题,我将类型定义如下:

const actionCreators: Partial<ActionCreators> = {};

type ActionCreator = (typeof actionCreators)[number];

那么当把函数赋值给对象时:

const actionCreator: ActionCreator = ((payload) => ({type: keyAsString, payload}));

actionCreators[enumIdx.value] = actionCreator;

Typescript 不再抱怨,actionCreators 完全按预期输入:)

工厂返回的 actionCreators 现在是确定的,不可能是未定义的,所以我可以按如下方式使用工厂:

const test = actionFactory<MyTypeConfig>({actionTypes});

const actionCreators = test();

const action = actionCreators[actionTypes.DO_ACTION]({value: 'hello'});

【讨论】:

    猜你喜欢
    • 2020-08-07
    • 1970-01-01
    • 2016-09-10
    • 2021-09-18
    • 2017-01-05
    • 1970-01-01
    • 2022-01-16
    • 2021-12-05
    • 2018-08-15
    相关资源
    最近更新 更多