导入JS文件时继承方法无法访问的Angular技术问题咨询

现有如下JS文件：

export function A() {
    this.aTest = function(){
        // This work fine
    }
}

function B() {
    this.bTest = function() {
        // this function will not available when import
    }
}

A.prototype = new B();
A.constructor = A;

在Angular项目中导入后执行以下代码：

let test = new A();
test.aTest(); // 正常工作
test.bTest(); // TS2339: Property bTest does not exist on type A

相关情况：

• 纯JS项目中bTest方法可正常调用
• 需要解决Angular中导入该JS文件后，所有继承方法都能正常使用的问题

1. 新增类型声明文件（最规范） #

在JS文件的同级目录下创建同名的.d.ts声明文件（比如JS文件名为utils.js，就创建utils.d.ts），内容如下：

declare class B {
    bTest(): void;
}

declare class A extends B {
    aTest(): void;
    constructor();
}

export { A };

TypeScript会自动读取该声明文件，识别A继承了B的方法，从而消除报错。

2. 用类型断言临时绕过检查 #

如果不想编写声明文件，调用bTest时通过类型断言明确告知TypeScript该方法存在：

let test = new A();
(test as any).bTest();

// 更严谨的写法：定义包含bTest的联合类型
type AWithB = A & { bTest(): void };
(test as AWithB).bTest();

这种方式适合快速临时解决问题，但长期维护性不如类型声明文件。

3. 重构JS为ES6类语法（推荐） #

若允许修改原JS文件，将老式构造函数改为ES6类语法，TypeScript可自动推导类型，无需额外配置：

export class B {
    constructor() {
        this.bTest = function() {
            // 原方法内容
        };
    }
}

export class A extends B {
    constructor() {
        super();
        this.aTest = function() {
            // 原方法内容
        };
    }
}

修改后导入使用，TS不会再报错，代码也更符合现代JavaScript规范。

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