TypeScript类方法以窄参数实现接口引发运行时错误

问题代码 #

type Foo = {
    fn1(field: string | undefined): void
}

class Test implements Foo {
    fn1(field: string): void {
        console.log(field.toLowerCase())
    }
}

const x: Foo = new Test()
void x.fn1(undefined) // 编译通过但运行时崩溃

预期与实际行为 #

• 预期行为：TypeScript应该给出编译错误，提示"Class 'Test' incorrectly implements interface 'Foo'"，因为类的方法签名和接口不匹配。
• 实际行为：代码编译无报错，但调用x.fn1(undefined)时会因undefined没有toLowerCase()方法而运行时崩溃。

为什么TypeScript不标记错误？ #

这是因为TypeScript对类实现接口时的方法参数，采用了特殊的兼容性规则：

• 为适配JavaScript中常见的"子类方法可更严格处理参数"的场景，TypeScript允许类的方法参数类型比接口定义的更窄（即更严格），此时不会触发编译错误。
• 本质上，TypeScript没有对类方法的参数进行严格的逆变检查，导致接口允许的string | undefined参数，被类的string类型参数覆盖时，编译阶段无法识别风险。

如何排查并解决此类问题？ #

1. 启用严格函数类型检查 #

在tsconfig.json中开启strictFunctionTypes配置，强制TypeScript对函数参数进行严格的逆变检查：

{
  "compilerOptions": {
    "strictFunctionTypes": true
  }
}

开启后，上述代码会直接抛出编译错误，提示类Test未正确实现接口Foo。

2. 对齐类与接口的参数类型 #

确保类的方法参数类型与接口完全一致，或显式处理undefined情况：

class Test implements Foo {
    fn1(field: string | undefined): void {
        if (field === undefined) {
            console.log("参数为undefined");
            return;
        }
        console.log(field.toLowerCase())
    }
}

3. 调用时添加类型守卫 #

如果必须保持类方法的参数类型，可以在调用前通过类型守卫规避风险：

const x: Foo = new Test()
// 手动确保参数符合类的要求
const safeArg: string = "valid string";
void x.fn1(safeArg);

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