如何让TypeScript识别过滤后的数组元素price属性非空？

问题根源是Array.filter()默认不会自动缩小返回数组的类型，TypeScript无法推断过滤后的元素符合FruitsWithNonNull类型，需要明确告知过滤条件的类型语义。以下是两种可行方案：

方法1：使用自定义类型守卫（推荐） #

定义返回类型谓词的函数，让TypeScript明确知晓：当函数返回true时，当前元素属于FruitsWithNonNull类型。

type Fruits = {
    type: 'banana' | 'peach' | 'kiwi',
    price: null | string; 
}

type FruitsWithNonNull = Pick<Fruits, 'type'> & {
    price: NonNullable<Fruits['price']>
} 

const fruits:Fruits[] = [{type:'banana', price:null}, {type:'peach',  price:null},{type:'peach', price:'12'}]

// 自定义类型守卫函数
function hasNonNullPrice(fruit: Fruits): fruit is FruitsWithNonNull {
    return fruit.price !== null;
}

// 用类型守卫过滤，TypeScript会自动推断数组类型
const filteredFruits:FruitsWithNonNull[] = fruits.filter(hasNonNullPrice);

这种方式通过类型谓词fruit is FruitsWithNonNull给TypeScript提供明确的类型判断依据，是类型安全的最佳实践。

方法2：使用类型断言（简洁但需自行保证逻辑正确） #

如果不想额外定义函数，可直接对filter结果做类型断言，强制指定返回数组的类型：

const filteredFruits:FruitsWithNonNull[] = fruits.filter(fruit => fruit.price !== null) as FruitsWithNonNull[];

该方式更简洁，但需要你确保过滤逻辑确实能排除所有price为null的元素，否则可能引入类型不安全的风险。

补充说明 #

你的FruitsWithNonNull类型定义是正确的，也可以简化为Omit<Fruits, 'price'> & { price: string }，效果与原定义完全一致。

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