TypeScript转JavaScript后子类实例无法访问父类方法问题问询

定义了如下TypeScript类：

class AnyBackendRoute {
   public getProps() {...}
}

class AnyBFFRoute extends AnyBackendRoute {
   public getProps() {...}
}

class UserSignUpRoute extends AnyBFFRoute {
   public getSomethingElse() {...}
}

将其转译为CommonJS/ES6格式后引入到另一个.js文件中。转译前的测试代码可以正常执行：

const route = new UserSignUpRoute()

// getProps() 是AnyBFFRoute的公共方法，可见
console.log(route.getProps())

但使用带.d.ts文件的转译后代码时，出现TypeScript错误：

Type 'UserSignUpRoute' is missing the following properties from type 'AnyBFFRoute': getProps

原本预期转译后的代码中会存在类似如下内容：

UserSignUpRoute.prototype.getProps = function () {
    return this.props;
};

但实际转译后的UserSignUpRoute.js及对应.d.ts文件中均无该方法，仅能看到类自身的公共方法。疑问点：

• 认为该方法应存在于UserSignUpRoute.js中的想法是否错误？
• 若错误，为何转译前后会存在可调用与不可调用的不一致情况？

1. 你的想法是错误的
   JavaScript基于原型链实现继承，UserSignUpRoute继承自AnyBFFRoute，而AnyBFFRoute的getProps方法挂载在它的原型对象上。当你创建UserSignUpRoute实例时，会通过原型链向上查找getProps方法，完全不需要在UserSignUpRoute的原型或实例上重复定义该方法。转译后的代码遵循JavaScript的原生继承逻辑，所以不会在UserSignUpRoute.js中生成getProps方法，这是正常且合理的。

2. 转译前后不一致的原因
   转译前直接运行TypeScript代码时，TypeScript编译器在类型检查阶段能正确识别类的继承关系，允许调用继承的方法；同时运行时会通过原型链正确找到getProps方法，所以代码能正常执行。

转译后出现类型错误，核心原因是类型定义文件（.d.ts）生成异常：

• 可能是tsconfig.json中的declaration等配置项设置不当，导致生成的.d.ts文件没有正确继承父类的类型信息，使得TypeScript无法识别UserSignUpRoute继承了AnyBFFRoute的getProps方法。
• 也可能是模块导入导出的问题，比如转译后的模块没有正确导出类，或者导入时的类型引用路径错误，导致类型检查时无法关联父类的类型定义。

需要注意的是，转译后的JavaScript代码在运行时其实是可以正常调用getProps方法的（原型链机制依然生效），只是TypeScript的类型检查因为.d.ts文件的问题报错，属于类型层面的错误，而非运行时执行错误。

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