React Redux Saga 与 Typescript 错误属性不存在

Question

第一次使用 TS 设置 React、Next js 应用程序并受到了打击。

TS 在 redux-saga 设置时抛出以下错误：

Property 'name' does not exist on type 'Input | DataPostGreeting | ErrorPostGreeting'. Property 'name' does not exist on type 'DataPostGreeting'

准确的说name不存在于成功响应的类型DataPostGreeting上，但存在于Input

相关操作是 POST 在测试应用程序上创建问候语。

我以为我已经正确输入了 Input 的有效负载，这是问候语的 name，但 TS 似乎对此并不满意。即使它确实将 Input 识别为适用类型的一部分。

这是突出显示错误触发器的传奇：

/store/sagas/greetings.ts

import { all, call, put, takeLatest } from 'redux-saga/effects';
import { actionPostGreetingOk, actionPostGreetingError } from '../actions/creators';
import { Actions } from '../actions/names';
import { ActionTypes } from '../actions/types';
import { apiQl } from 'lib/functions';

function* postGreeting(action: ActionTypes) {
  const queryQl = `mutation createGreeting(
    $name: String!
  ) {
      createGreeting(input: {
          name: $name
      }) {
          greeting {
              id
          }
      }
  }`;


  const variables = {
     name: action.payload.name,        // *** ERROR IS THROWN HERE ***
  };


  try {
    const data = yield call(apiQl, queryQl, variables);
    if (data.errors) {
        yield put(
            actionPostGreetingError({
                error: data.errors,
            }),
        );
    } else {
        yield put(
            actionPostGreetingOk({
                greeting: data.data.createGreeting,
            }),
        );
    }
} catch (error) {
    if (error.response === undefined || error.code === 'ECONNABORTED') {
        console.log('ERROR RESPONSE UNDEFINED, ABORTED');
    }
}

export default function* greeting() {
   yield all([takeLatest(Actions.POST_GREETING, postGreeting)]);
}

关于类型文件：

...
export interface Input {
   name: string;
}
export interface ActionPostGreeting {
   type: typeof Actions.POST_GREETING;
   payload: Input;
}
...

export type ActionTypes =
  | ActionPostGreeting
  | ActionPostGreetingInit
  | ActionPostGreetingOk
  | ActionPostGreetingError
  | ActionHydrate;

动作创建者：

export const actionPostGreeting = (payload: Input): ActionPostGreeting => {
  return {
    type: Actions.POST_GREETING,
    payload,
 };
};

Answer 1

您正在将整个 ActionTypes 联合传递给您的 saga，但您的函数应该只采用特定的有效负载类型（例如 ActionPostGreeting）。否则，这意味着您的 saga 可以使用任何负载调用，要解决您的问题，您可以像这样限制类型：

function* postGreeting(action: ActionPostGreeting) {
  // do stuff

  const variables = {
    name: action.payload.name, // will be good
  };
}

React Redux Saga 与 Typescript 错误属性不存在

React Redux Saga with Typescript error property does not exist

reactjs

typescript

redux

redux-saga

React Redux Saga 与 Typescript 错误 属性 不存在

React Redux Saga with Typescript error property does not exist

reactjs

typescript

redux

redux-saga

React Redux Saga 与 Typescript 错误属性不存在