如何修复在 redux-saga 中调用 takeEvery() 时出现 TypeScript 错误？答案

【问题标题】：How to fix TypeScript error occurs when call takeEvery() in redux-saga?如何修复在 redux-saga 中调用 takeEvery() 时出现 TypeScript 错误？
【发布时间】：2018-04-16 07:43:10
【问题描述】：

import { createAction, handleActions } from 'redux-actions';
import { delay } from 'redux-saga';
import { all, put, takeEvery } from 'redux-saga/effects';

export const action_creators = {
    get_action_of_set_number: createAction<{ number:number }>('set_number'),
    get_action_of_set_number_async: createAction<{ number:number }>('set_number_async')
};

const state = {
    number: 0
}

function* set_number_async(action: { payload: { number:number } }) {
    yield delay(1000);
    yield put(action_creators.get_action_of_set_number(action.payload));
}

export function* saga(action) {
    yield all([takeEvery('set_number_async', set_number_async)]);
    *** Error message : Argument of type '"set_number_async"' is not assignable
    *** to parameter of type 'Channel<{ payload: { number:number; }; }>'.
}

export default handleActions({
    set_number: (state, action) => {
        const new_number = action.payload!.number;
        return { ...state, number:new_number };
    }
}, state);

完整示例：https://codesandbox.io/s/zry4vl2ymx（为方便起见，省略了其他类型定义。）

我不知道我做错了什么。如果您知道什么是问题以及如何解决它，请帮助解决问题。谢谢！ :)

【问题讨论】：

标签： reactjs typescript redux redux-saga

【解决方案1】：

当我遇到这个问题时，这是因为我的传奇实际上并没有作为它的论点采取行动——我认为你遇到了同样的事情。

在takeEvery('set_number_async', set_number_async) 中，方法set_number_async 的参数没有类型属性，这意味着它的形状不像Action 类型。（请记住，typescript 中的类型是鸭子/结构的——它们只真正关心类型具有哪些属性。）

如果我通过添加类型属性来更改签名，则示例编译：

function* set_number_async(action: { payload: { number:number }, type:string }) {
    yield delay(1000);
    yield put(action_creators.get_action_of_set_number(action.payload));
}

【讨论】：