TypeScript联合类型含string时数组类型推导异常如何解决

问题复现 #

当联合类型同时包含两个判别结构的数组类型与string类型时，直接用数组字面量赋值会触发类型错误：

export interface TTypeOne {
  type: 'one';
  oneProperty: string;
  body: string;
}

export interface TTypeTwo {
  type: 'two';
  twoProperty: string;
  body: string;
}

// 该类型定义下数组字面量赋值会报错
export type TTotal = TTypeOne[] | TTypeTwo[] | string;

const total: TTotal = [
  {
    type: 'one',
  },
];

如果移除联合类型中的string，仅保留TTypeOne[] | TTypeTwo[]，相同的赋值写法可以正常通过类型校验。

问题原因 #

TypeScript的上下文类型推导在处理多层联合类型时，如果同一层联合中同时存在原始类型（如string）和多个独立的数组类型，不会自动触发判别联合数组的窄化逻辑：

1. 首先判定数组字面量不匹配string类型
2. 由于存在原始类型分支，TS不会将数组元素的预期类型推导为TTypeOne | TTypeTwo，因此无法识别type: 'one'的判别字段，最终判定当前值不匹配任何联合分支。

当联合类型中仅存在数组类型时，TS会自动识别这是判别联合的数组场景，按判别逻辑做类型兼容校验。

解决方案 #

方案1：调整数组类型的联合写法（改动最小，推荐） #

将两个独立数组类型的联合，改写为元素类型联合的数组，语义上完全等价（全为TTypeOne或全为TTypeTwo的数组，必然符合(TTypeOne | TTypeTwo)[]的类型约束），同时可以让TS正确推导数组元素的预期类型：

export type TTotal = (TTypeOne | TTypeTwo)[] | string;

// 以下赋值可正常通过校验，和无string分支时表现一致
const total: TTotal = [
  {
    type: 'one',
  },
];

该改写是完全类型安全的：原类型中所有合法值（全TTypeOne的数组、全TTypeTwo的数组、字符串）都符合改写后的类型约束，不会出现兼容性问题。

方案2：使用satisfies运算符做类型校验（TS 4.9+支持） #

如果不想修改原有类型定义，可以用satisfies运算符在赋值时做类型匹配校验，它会自动识别值匹配联合类型的哪一个分支，不会出现上下文推导歧义：

export type TTotal = TTypeOne[] | TTypeTwo[] | string;

const total = [
  {
    type: 'one',
  }
] satisfies TTotal;

方案3：显式标注数组的类型 #

在赋值时显式指定当前值为数组类型分支，跳过推导阶段的歧义判断：

export type TTotal = TTypeOne[] | TTypeTwo[] | string;

const total: TTotal = <TTypeOne[]>[
  {
    type: 'one',
  }
];

注意：该写法使用了类型断言，会跳过部分类型检查，建议优先使用前两种方案。

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