TypeScript中布尔值分支数组映射的类型错误解决方案咨询

问题背景 #

我有一个编译时未知值的布尔变量isX，以及两个返回不同类型数组的函数getA和getB：

const isX: boolean; // 编译时未知其值
function getA(): A[];
function getB(): B[];

根据isX的值选择调用对应的函数，执行通用逻辑后，将数组元素映射为对应组件ComponentA或ComponentB：

const data: A[] | B[] = isX ? getA() : getB();
// 适用于两种元素类型的通用自定义逻辑
return data.map(el => isX ? <ComponentA c={el} /> : <ComponentB c={el} />);

此时出现类型错误：

Type 'A | B' is not assignable to type 'A'.
  Type 'B' is missing the following properties from type 'A': x, y, and 3 more.

问题原因 #

TypeScript的控制流分析无法跨map回调函数关联isX的状态与data元素的类型。虽然运行时isX的状态和data的类型完全一致，但编译时TS无法保证回调中的isX和赋值data时的isX是同一个状态，因此会将el推断为A | B，导致组件props类型不匹配。

最佳解决方案 #

方案1：拆分条件分支，明确类型范围

将整个流程按isX拆分为两个独立分支，每个分支内data的类型是明确的A[]或B[]，TS能准确推断元素类型：

if (isX) {
  const data = getA();
  // 执行通用逻辑
  return data.map(el => <ComponentA c={el} />);
} else {
  const data = getB();
  // 执行通用逻辑
  return data.map(el => <ComponentB c={el} />);
}

优点：逻辑直观，无需额外封装，TS类型推断完全准确，无类型安全隐患。

方案2：封装泛型处理函数，复用通用逻辑

如果通用逻辑需要复用，可将其封装为泛型函数，让TS关联数据源类型与组件props类型：

function processData<T>(data: T[], Component: React.ComponentType<{ c: T }>) {
  // 执行通用逻辑
  return data.map(el => <Component c={el} />);
}

return isX ? processData(getA(), ComponentA) : processData(getB(), ComponentB);

优点：通用逻辑复用性强，通过泛型约束保证类型一致性，代码更简洁。

不推荐的方案：类型断言 #

虽然可以用类型断言强制跳过TS检查，但会丢失类型安全性，若后续逻辑出错（如isX与data类型不匹配），运行时会出现错误：

return data.map(el => isX ? <ComponentA c={el as A} /> : <ComponentB c={el as B} />);

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