TypeScript联合类型Action报Property does not exist on type错误

你没有为联合类型的各个子接口配置可辨识属性（类型标识字段），导致TypeScript无法推断当前变量对应的具体子类型，因此无法直接访问仅属于部分子接口的独有属性。

修复步骤 #

1. 为每个子接口添加唯一标识的可辨识字段 #

选择一个公共字段（通常命名为type），为每个子接口设置固定的字符串字面量值，作为类型的唯一辨识依据：

interface IAuthSuccessAction {
  type: "AUTH_SUCCESS"; // 唯一标识该接口的固定值
  token: string;
  // 其余公共/独有属性
}

interface IAuthFailAction {
  type: "AUTH_FAIL"; // 与其他接口的type值区分开
  error: string;
  // 其余公共/独有属性
}

interface IAuthResetAction { // 此处为你提到的第三个接口示例
  type: "AUTH_RESET";
  // 其余属性
}

// 联合类型定义保持不变
type AuthAction = IAuthSuccessAction | IAuthFailAction | IAuthResetAction;

2. 访问独有属性前先做类型收窄 #

通过判断可辨识字段的值，让TypeScript自动收窄当前变量的实际类型，之后就能正常访问对应子接口的独有属性：

function reducer(action: AuthAction) {
  switch (action.type) {
    case "AUTH_SUCCESS":
      // 此时action自动被收窄为IAuthSuccessAction类型，可正常访问token
      console.log(action.token);
      break;
    case "AUTH_FAIL":
      // 此时action自动被收窄为IAuthFailAction类型，可正常访问error
      console.log(action.error);
      break;
    case "AUTH_RESET":
      // 对应第三个接口的处理逻辑
      break;
  }
}

如果不想新增可辨识字段，也可以通过in运算符判断属性是否存在，实现临时类型收窄：

if ("token" in action) {
  console.log(action.token); // 无类型报错
}
if ("error" in action) {
  console.log(action.error); // 无类型报错
}

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