如何为Array原型添加带正确类型推导的filterUndefined方法？

当然可以实现，核心是用TypeScript的条件类型精准剔除返回值里的undefined类型，同时注意原型方法的this指向问题。

正确的实现代码 #

首先扩展全局Array接口，用Exclude<T, undefined>提取数组元素类型中排除undefined后的类型：

declare global {
  interface Array<T> {
    filterUndefined: () => Array<Exclude<T, undefined>>;
  }
}

然后实现原型方法——这里不能用箭头函数（箭头函数会绑定外层this，无法指向数组实例），要用普通函数并指定this的类型：

Array.prototype.filterUndefined = function<T>(this: (T | undefined)[]): T[] {
  return this.filter((item): item is T => item !== undefined);
};

为什么之前的写法有问题 #

• 第一种写法里，返回的Array<T>并没有剔除undefined，因为原数组的泛型T可能本身就包含undefined（比如(number | undefined)[]的T是number | undefined），必须用Exclude<T, undefined>明确去掉undefined类型。
• 第二种写法直接给Array<T | undefined>扩展接口是不合法的，TypeScript不允许用联合类型作为泛型参数来扩展接口，正确的做法是让接口支持任意泛型T，再通过条件类型处理包含undefined的情况。

使用示例 #

const mixedArray = ['a', undefined, 'b', undefined];
const filteredArray = mixedArray.filterUndefined(); // filteredArray的类型为string[]
console.log(filteredArray); // ['a', 'b']

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