TypeScript给Partial联合类型赋值时未捕获错误问题

问题原因 #

这两种操作表现不一致是TypeScript针对联合类型的两种检查逻辑不同导致的：

1. 命令式给已声明的Partial<A_or_B>类型变量赋值属性：
   Partial<A_or_B>等价于Partial<A> | Partial<B>，当你直接访问变量的color属性时，TS无法确定这个变量当前属于联合中的哪个分支，而Partial<A>上不存在color属性，所以会直接抛出错误。
2. 行内对象直接赋值给Partial<A_or_B>类型参数：
   此时TS执行的是兼容性校验，只要行内对象符合联合类型任意一个分支的结构要求就会通过校验。{color: "red"}完全符合Partial<B>的类型定义，所以不会报错。

解决方案 #

根据你的实际需求可以选择以下两种方案：

方案1：仅允许修改A、B共有的属性 #

如果你的业务逻辑要求newValues只能传入A和B都存在的公共属性，直接把newValues的类型改成Partial<Common>即可，这样独有属性color就会被禁止传入。

export type Payload<T> = {
  [ActionTypes.POINT_UPDATED]: {
    id: string;
    category: Category;
    newValues: Partial<Common>;
  };
};

方案2：允许修改独有属性，同时强校验类型匹配 #

如果你需要支持修改单个类型的独有属性，只需要把Action的payload改成带category区分的联合类型即可，TS会自动校验属性和类型是否匹配：

export type Payload = {
  [ActionTypes.POINT_UPDATED]: 
    | { id: string; category: Category.A; newValues: Partial<A> }
    | { id: string; category: Category.B; newValues: Partial<B> }
};

修改后如果你在newValues中传入color属性，就必须同时传入category: Category.B，否则TS会直接抛出错误，从类型层面避免不合法的属性传入。

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