typescript 不理解 'one of type' 中的对象键

Question

我有一些这样的功能:

actions.ts

export const addToCart = (id: string) => ({
  id,
  type: 'ADD_TO_CART',
});

export const emptyCart = () => ({
  type: 'EMPTY_CART',
});

export const removeFromCart = (id: string) => ({
  id,
  type: 'REMOVE_FROM_CART',
});

export type Action =
  | ReturnType<typeof addToCart>
  | ReturnType<typeof emptyCart>
  | ReturnType<typeof removeFromCart>;

reducer.ts

import { Action } from './actions';
import { State } from './state';

export default (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TO_CART': {
      return [...state, action.id];
    }
    case 'EMPTY_CART': {
      return [];
    }
    case 'REMOVE_FROM_CART': {
      return state.filter(id => id !== action.id);
    }
    default:
      return state;
  }
};

我的 IDE 告诉我 Action 的类型是:

type Action = {
    id: string;
    type: string;
} | {
    type: string;
} | {
    id: string;
    type: string;
}

但是，reducer.ts 中的 action.id 的两种情况都会抛出此 Typescript 错误:

Property 'id' does not exist on type 'Action'.
  Property 'id' does not exist on type '{ type: string; }'.

这里有什么问题？我的类型似乎是正确的，我正在使用存在于其中一个类型选项中的对象键之一。

Answer 1

您创造了一个潜力discriminated union type Action，但是您的判别属性 type 被扩展为 string 类型 - 这就是 TS 无法找出您指​​的联合部分的原因.

一个简单的解决方法是用 as const 注释你的 action creator 函数的返回类型。 , 所以 type 的字符串字面量类型被保留:

export const addToCart = (id: string) => ({
  id,
  type: 'ADD_TO_CART',
}) as const; // add `as const`

// do this for the other functions as well

Playground