TypeScript联合类型过滤后无法正确推导类型的问题咨询

你的代码逻辑运行正常，但TypeScript无法自动推导bar的准确类型——这是因为TS的控制流分析在处理数组map的回调函数时，没法将回调内部的类型收窄结果自动汇总成数组的整体类型。虽然你在回调里排除了products为数组或null的情况，但TS不会主动把map后的数组类型确定为仅包含exampleObj结构的元素。

下面是几种更合理的解决方式，比类型断言更安全：

1. 明确标注回调的返回类型 #

先复用exampleObj的类型（避免重复定义结构），然后给map的回调指定返回类型，引导TS正确推导bar的类型：

// 直接复用exampleObj的类型，结构变更时自动同步
type ValidFooItem = typeof exampleObj;

const bar = foo.map((el): ValidFooItem => {
  if (!el.products || Array.isArray(el.products)) {
    return exampleObj;
  }
  return el;
});

这样TS会自动验证回调的返回值是否符合ValidFooItem，同时bar的类型会被推导为ValidFooItem[]，之后访问el.products.fooName就不会报错了。

2. 使用自定义类型守卫（可选，更严谨） #

如果需要更明确地收窄原数组元素的类型，可以先写一个类型守卫函数：

type ValidFooItem = typeof exampleObj;

function isValidFooItem(el: Foo[0]): el is ValidFooItem {
  return !!el.products && !Array.isArray(el.products);
}

const bar = foo.map((el) => {
  if (!isValidFooItem(el)) {
    return exampleObj;
  }
  return el;
});

这种方式通过类型守卫明确告诉TS哪些元素是符合要求的，同样能让bar被推导为ValidFooItem[]。

为什么类型断言不是最优解？ #

类型断言as typeof exampleObj[]是强制让TS接受某个类型，一旦后续代码逻辑改变（比如回调里不小心返回了不符合的类型），TS不会给出错误提示，存在类型安全隐患。而上面的方法都是让TS主动验证返回类型的正确性，更可靠。

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