时间戳

首页 > 解决方案 > Redux-saga：如何使用 typeScript 键入 worker 的参数

typescript - Redux-saga：如何使用 typeScript 键入 worker 的参数

问题描述

有没有办法使用打字稿来设置工人传奇的参数类型？

我有这个界面

interface ITask{
    id: number
    task: string,
    //other things here
}

我有这个听众和工人：

function* addTaskSaga():any {
    yield takeEvery("TASK_ADD", workerAddTaskSaga);
}
function* workerAddTaskSaga({data}:any) {
  //other things here
}

这段代码运行良好，但是我想强输入工人的参数，我的意思是：更改{data}:any为data:ITask

但是，这会引发异常：

The last overload gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'TakeableChannel<unknown>'.ts(2769)
effects.d.ts(207, 17): The last overload is declared here.

有任何想法吗？

标签： typescriptredux-sagaworker

解决方案

如果问题仍然相关，这里就是答案。

您应该定义一些Action从 redux 扩展的接口，然后将其作为类型参数传递给takeEvery. 这将正确键入工作函数。

// This is Action interface which will hold type and payload. 
interface TaskAction extends Action, ITask {type: "TASK_ADD" }

// Alternatively you may use 
// interface TaskAction extends Action {type: "TASK_ADD", data: ITask }

interface ITask{
  id: number
  task: string,
  //other things here
}

function* addTaskSaga():any {
  yield takeEvery<TaskAction>("TASK_ADD", workerAddTaskSaga);
}

function* workerAddTaskSaga(data:TaskAction) {
  // data is of type TaskAction
  // data.id is number from ITask
  // data.task is string from ITask
}

// Or if you've chosen second form of TaskAction
//   function* workerAddTaskSaga({ data } : TaskAction) {
     // data is of type ITask
//   }

推荐阅读