如何在TypeScript中将(number|undefined)[]转换为number[]

你当前的代码里，map会在obj.city不是'CA'时返回undefined，因此得到(number|undefined)[]类型。后续的filter虽然在运行时剔除了undefined，但TypeScript无法自动推断类型已变更，所以仍保留原类型。以下是几种可行的修正方式：

方案1：先过滤对象，再提取ID（推荐） #

先筛选出符合city === 'CA'的Person对象，再对这些对象提取id。这种方式逻辑清晰，TypeScript能直接推断出结果为number[]：

interface Person {
    id: number;
    name: string;
    city: string;
}

let personObj: Person[] = [
    { id: 1, name: 'John', city: 'LA' },
    { id: 2, name: 'Bob', city: 'CA' },
    { id: 3, name: 'Carl', city: 'CA' },
];

let objIds = personObj
  .filter(obj => obj.city === 'CA')
  .map(obj => obj.id);

doSomething(objIds); // objIds类型为number[]

方案2：给filter添加类型守卫 #

如果一定要用map后再filter，可以通过类型守卫明确告诉TypeScript，过滤后的数组元素不再包含undefined：

方式A：单独定义类型守卫函数 #

function isNumber(value: number | undefined): value is number {
  return value !== undefined;
}

let objIds = personObj
  .map(obj => obj.city === 'CA' ? obj.id : undefined)
  .filter(isNumber);

doSomething(objIds); // 类型为number[]

方式B：内联类型守卫 #

let objIds = personObj
  .map(obj => obj.city === 'CA' ? obj.id : undefined)
  .filter((id): id is number => id !== undefined);

doSomething(objIds); // 类型为number[]

方案3：使用类型断言（不推荐） #

如果你能100%确定过滤后的数组没有undefined，可以用类型断言强制转换类型，但这种方式跳过了TypeScript的类型检查，存在风险：

let objIds = (personObj
  .map(obj => obj.city === 'CA' ? obj.id : undefined)
  .filter(id => id !== undefined)) as number[];

doSomething(objIds);

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