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

【问题标题】：React Redux Saga with Typescript error property does not existReact Redux Saga 与 Typescript 错误属性不存在
【发布时间】：2021-09-30 17:18:45
【问题描述】：

第一次使用 TS 设置 React, Next js 应用程序并获得成功。

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

“输入 |”类型上不存在属性“名称” DataPost问候语 | ErrorPostGreeting'。 “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,
 };
};

【问题讨论】：

标签： reactjs typescript redux redux-saga

【解决方案1】：

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

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

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

【讨论】：