类继承链中实例化子类A时触发Uncaught TypeError异常如何解决？

常见原因及修复方案 #

1. 浏览器原生ES模块不识别.ts后缀 #

如果是直接在浏览器环境使用ES模块（未经过打包工具编译），浏览器无法识别.ts后缀，需要移除导入语句中的.ts后缀：

• A.ts修改后：

import { B } from "./B";
export class A extends B {}

• B.ts修改后：

import { C } from "./C";
export class B extends C {}

• functions.ts修改后：

import { A } from "./A";
export function doSomething(){
  const a = new A();
}

2. TypeScript编译配置有误 #

检查tsconfig.json配置，确保以下关键项设置正确：

• target版本不低于ES6（类继承是ES6特性）
• module选择适配运行环境的格式（比如ESNext或CommonJS）
• 未开启会破坏类继承逻辑的异常编译选项

参考基础配置示例：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "NodeNext"
  }
}

3. 存在循环引用 #

排查是否有其他文件间接造成A、B、C之间的循环依赖（比如C文件导入了A或B）。循环引用会导致类在继承时还未被正确定义，进而触发该错误。

4. 导出导入不匹配 #

确认所有类均为命名导出，且导入时使用对应名称，不要混用默认导出与命名导出。比如若某个类写成export default class C，但导入时用import { C } from "./C"，会导致C为undefined，继承操作自然失败。

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