Angular 7升级至10后，抽象类调用抽象方法触发TypeError报错

问题情况 #

把Angular从7版本升级到10之后，页面完全加载不出来，浏览器控制台抛出错误：TypeError: this.formatValue is not a function。代码里存在一个抽象类InputValue，它的非抽象方法getValue调用了抽象方法formatValue，且继承该抽象类的子类已经实现了formatValue方法：

formatValue(value: any): string | null {
    return [null, void 0, ''].includes(value) ? null : String(value);
}

代码编译正常，但运行时触发上述错误。

问题原因 #

Angular升级到10时，配套的TypeScript版本也更新到3.9.x，对类继承、方法上下文的检查规则更严格，常见触发原因包括：

• this上下文丢失：如果getValue被作为回调传递（比如绑定到模板事件、异步操作中），未正确保留this指向，调用时this并非子类实例，导致找不到formatValue方法
• 继承链异常：中间继承的抽象类错误覆盖了formatValue，或者未正确声明该抽象方法，导致子类的实现未被正确识别
• 编译配置变更：升级后strictBindCallApply等严格模式配置默认开启，暴露了旧版本未检测到的this上下文问题

解决方案 #

1. 固定this指向 #

如果getValue用于模板绑定或回调场景，通过两种方式确保this指向子类实例：

• 构造函数内绑定：

constructor() {
    this.getValue = this.getValue.bind(this);
}

• 箭头函数定义getValue（无需子类重写该方法时适用）：

getValue = () => {
    // 原有逻辑，调用this.formatValue
    return this.formatValue(someValue);
}

2. 检查继承链的方法声明 #

确认中间抽象子类的formatValue处理正确：若中间类为抽象类，要么实现该方法，要么继续声明为抽象方法：

abstract class MiddleInput extends InputValue {
    abstract formatValue(value: any): string | null;
}

3. 临时调整编译配置（不推荐长期使用） #

若为严格模式触发的问题，可在tsconfig.json中临时关闭相关配置（建议优先修复代码）：

{
    "compilerOptions": {
        "strictBindCallApply": false
    }
}

验证方法 #

修改后重新编译运行项目，检查浏览器控制台是否仍有错误，确认页面正常加载。

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