操作界面错误 'Property does not exist on type'

Question

我有一个 type 可以采用 3 个接口的结构，但是当使用这 3 个接口中的 2 个属性时，我得到一个错误。

动作在采用IAuthSuccessAction接口的结构时应该有一个token属性，当它采用结构时应该有一个error属性 IAuthFailAction 界面。

我错过了什么？

在我尝试应用@Baka 的给定建议后：

Answer 1

从 AuthAction 联合中删除 IBasicAction，并将唯一的 type 字段添加到 IAuthFailAction 和 IAuthSuccessAction（重用 actionTypes 中的值），例如这个：

interface IAuthFailAction extends IBasicAction {
    type: 'fail';
    error: object;
}

interface IAuthSuccessAction extends IBasicAction {
    type: 'success';
    token: string;
}

type AuthAction = IAuthFailAction | IAuthSuccessAction;

这样你会得到 discriminated union 并且 TS 将能够根据 type 字段

来阻止可用的属性

如果actionTypes定义为文字对象，考虑使用const 在引用文字对象的属性类型时断言或切换到 enum. Also you need to use typeof 运算符，例如

const actionTypes = {
  ACTION: 'ACTION',
} as const

interface ISomeAction {
  type: typeof actionTypes.ACTION
}

const action: ISomeAction = {
  type: 'ACTION'
}

示例enum：

enum actionTypes {
  ACTION = 'ACTION'
}

interface ISomeAction {
  type: actionTypes.ACTION
}

const action: ISomeAction = {
  type: actionTypes.ACTION
}

操作界面错误 'Property does not exist on type'

Action interface error 'Property does not exist on type'

typescript

reactjs

redux

react-redux