React+Next.js+TS项目配置redux-saga时name属性不存在报错如何解决？

问题原因 #

你当前的saga处理函数postGreeting的入参action标注的是全局联合类型ActionTypes，TypeScript的类型检查不会感知takeLatest(Actions.POST_GREETING, postGreeting)的过滤逻辑——它默认认为进入该函数的action可能是ActionTypes包含的任意类型，对应的payload自然是多个类型的联合，其中DataPostGreeting等类型不存在name属性，因此抛出类型错误。

解决方案 #

方案1：类型收窄（最安全，推荐） #

在访问payload前通过type字段判断当前action的类型，TS会自动收窄payload的类型范围：

function* postGreeting(action: ActionTypes) {
  // 加这行类型守卫即可
  if (action.type !== Actions.POST_GREETING) return;

  const queryQl = `mutation createGreeting(
    $name: String!
  ) {
      createGreeting(input: {
          name: $name
      }) {
          greeting {
              id
          }
      }
  }`;
  // 后续代码不变，此时TS可识别action.payload为Input类型
  const variables = {
     name: action.payload.name,
  };
  // ...剩下的原有逻辑
}

方案2：直接指定函数入参的精确类型 #

因为这个saga只会被触发Actions.POST_GREETING类型的action，不需要标注为全局的ActionTypes，直接指定为对应类型即可：

// 把入参类型从ActionTypes改成ActionPostGreeting
function* postGreeting(action: ActionPostGreeting) {
  // 原有代码不用改，TS可直接识别payload为Input类型
}

方案3：类型断言（临时快速解决，不推荐） #

如果只是临时调试不想修改类型结构，可以直接断言payload为Input类型：

const variables = {
  name: (action.payload as Input).name,
};

该方法跳过了TS的类型校验，存在类型安全风险，只建议临时使用。

内容的提问来源于stack exchange，提问作者BernardA