如何让TypeScript识别Array.map中已过滤的可选属性已存在

问题背景 #

定义类型：

type Foo = {
    x?: string[]
    y: number
}

对包含该类型的数组过滤后，TypeScript仍无法识别x已存在：

const list: Foo[] = [
    { y: 2},
    { x: ['a'], y: 9}
] 

list
    .filter(item => item.x !== undefined)
    .map(item => item.x[0] || '-') // 提示x可能为undefined

现有类型守卫方案需要额外定义接口和函数，过于繁琐，寻求更简洁的合法解决方式（不抑制错误）。

简洁解决方案 #

1. 内联类型谓词 #

直接在filter回调中使用类型谓词，无需额外定义接口或函数：

list
    .filter((item): item is Foo & { x: string[] } => item.x !== undefined)
    .map(item => item.x[0] || '-')

这里的item is Foo & { x: string[] }直接告诉TypeScript：过滤后的元素必然包含必填的x属性，后续map中item.x的类型会被正确推断为string[]。

2. 利用内置工具类型复用类型 #

如果需要多次使用带x的类型，用TypeScript内置的Required工具类型简化定义：

type FooWithX = Required<Pick<Foo, 'x'>> & Omit<Foo, 'x'>;

list
    .filter((item): item is FooWithX => item.x !== undefined)
    .map(item => item.x[0] || '-')

Required<Pick<Foo, 'x'>>将x转为必填属性，再与原类型的其他属性合并，比手动扩展接口更简洁。

3. 可选链+空值合并（跳过过滤场景） #

如果不需要过滤数组，仅需安全访问x的元素，用可选链?.和空值合并??同时兼顾类型安全和运行时安全：

list
    .map(item => item.x?.[0] ?? '-')

这种方式直接处理所有元素，无需过滤，适合不需要保留仅含x元素数组的场景。

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