TypeScript：过滤含指定属性的元素后如何重新分配类型？

TS无法自动识别filter回调的过滤逻辑能排除sublist为undefined的情况，因此会出现类型不匹配报错，以下是几种可行的解决方式：

方式一：类型断言（最简单直接） #

手动告知TS过滤后的数组类型为ListNodeWithSublist[]：

const nodesWithSublist = list.options.filter(
  (item: OptionProps) => item.sublist
) as ListNodeWithSublist[];

适合能确定过滤逻辑绝对可靠的场景，可快速解决类型报错。

方式二：自定义类型守卫（更严谨） #

定义类型守卫函数，让TS自动推导过滤后的元素类型：

// 类型守卫函数，判断元素是否包含有效sublist
function hasSublist(item: OptionProps): item is ListNodeWithSublist {
  return !!item.sublist;
}

// 使用守卫函数过滤，TS会自动识别数组类型为ListNodeWithSublist[]
const nodesWithSublist: ListNodeWithSublist[] = list.options.filter(hasSublist);

这种方式更符合TS类型安全设计，TS会完全信任守卫函数的判断逻辑，无需手动断言。

方式三：内联类型守卫（简洁版） #

把类型守卫逻辑直接写在filter回调中，省去单独定义函数的步骤：

const nodesWithSublist = list.options.filter(
  (item): item is ListNodeWithSublist => !!item.sublist
);

效果与方式二一致，代码更紧凑。

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