类型上不存在属性但属性存在

Question

我不明白为什么 TypeScript 会抛出错误

interface SendMessageAction {
    type: 1;
}

interface DeleteMessageAction {
    type: 2;
    idBlock:string;
}

type ChatActionTypes = SendMessageAction | DeleteMessageAction;


const CounterReducer = (action:ChatActionTypes) => {
    action.idBlock
}
    Property 'idBlock' does not exist on type 'ChatActionTypes'.
    Property 'idBlock' does not exist on type 'SendMessageAction'.

接口DeleteMessageAction 中存在字段 idBlock

如何修复错误？

Answer 1

如果您分析给出的错误消息，它会说明以下内容：

类型“ChatActionTypes”上不存在属性“idBlock”。

类型“SendMessageAction”上不存在属性“idBlock”。

打字稿无法从您的使用中推断出action: ChatActionTypes是DeleteMessageAction ，因为您已将其指定为ChatActionTypes 。 因此，Typescript 会警告您，它无法在ChatActionTypes的 3 个可能匹配项中的 2 个中找到它。

如果您首先验证action参数上的type ， 打字稿将能够推断出该操作当时是DeleteMessageAction ，例如通过执行以下操作：

const CounterReducer = (action:ChatActionTypes) => {
   if (action.type === 2) { // 2 is mentioned on DeleteMessageAction for type
     action.idBlock; // so you can now do something with idBlock here
   }
}