如何仅为泛型满足特定接口的Array类型扩展Array.prototype方法

错误原因 #

你的实现存在两个核心问题：

1. 不能直接给全局Array的顶层泛型加T extends MyInterface约束，会和TS内置的无约束Array泛型定义冲突
2. 泛型约束语法错误，T extends MyInterface只能在泛型定义的位置声明，不能直接写在类型参数的使用位置

正确实现方案 #

第一步：定义基础接口

interface MyInterface {
    v: number;
}

第二步：扩展Array接口

利用TS的this参数做调用约束，不需要修改Array顶层的泛型定义：

注意：如果你的代码是模块化文件（包含import/export语句），需要把接口声明放在declare global块中才能全局生效

// 模块化场景下使用
declare global {
    interface Array<T> {
        myFunc(this: Array<MyInterface>): this;
    }
}

// 非模块化场景下直接使用
// interface Array<T> {
//     myFunc(this: Array<MyInterface>): this;
// }

第三步：实现原型方法

运行时代码不需要加TS类型约束，类型校验只在编译阶段生效，建议额外加可选的运行时校验避免异常调用，同时设置方法为不可枚举避免污染数组遍历：

Object.defineProperty(Array.prototype, 'myFunc', {
    value: function() {
        // 可选：运行时校验，防止JS场景下不符合要求的数组调用该方法
        // for (const item of this) {
        //     if (typeof item !== 'object' || item === null || !('v' in item) || typeof item.v !== 'number') {
        //         throw new TypeError('数组元素不符合MyInterface要求');
        //     }
        // }
        return this;
    },
    enumerable: false
});

效果验证 #

interface MyTypeExtendingInterface extends MyInterface {
    extra?: string;
}

const a: MyTypeExtendingInterface[] = [];
a.myFunc(); // 编译正常

const b: number[] = [];
b.myFunc(); // 编译报错：类型“number[]”的“this”上下文不能分配给方法的“this”参数类型“MyInterface[]”

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