TypeScript/JavaScript循环依赖引发继承构造函数报错咨询

报错信息 #

TypeError: Super constructor null of SecondChild is not a constructor
    at new SecondChild (<anonymous>:8:19)
    at <anonymous>:49:13
    at dn (<anonymous>:16:5449)

异常行为 #

• 移除SecondChild相关代码后运行正常，但调换index.ts中child与parent的导出顺序会触发错误；
• 将child.ts和second-child.ts合并到同一个文件定义两个类后，异常消失。

疑问 #

1. 该错误是否与循环依赖有关？若有关，TypeScript/JavaScript中循环依赖的核心问题是什么？
2. 能否解释此代码示例的行为逻辑？

背景说明 #

原本希望在父类中结合this类型与工厂方法实现抽象方法duplicate（目标是返回子类实例），这种方式能避免每个子类单独实现该方法带来的复杂度，但当前写法触发了上述报错。

项目结构 #

src/
  child.ts
  factory.ts
  index.ts
  parent.ts
  main.ts
  second-child.ts

问题解答 #

1. 错误源于循环依赖，JS/TS循环依赖的核心问题 #

该错误确实是循环依赖导致的。JS/TS中循环依赖的核心问题是模块初始化顺序冲突与变量赋值延迟：
当模块之间互相导入时，JS引擎会先启动所有依赖模块的加载，但只会执行模块顶层代码到遇到未完成的导入为止，剩余代码暂停执行，直到依赖模块完成初始化。如果循环依赖中存在类继承关系，就可能出现子类继承父类时，父类模块还未完成初始化，导致父类的引用为null或undefined，进而抛出构造器无效的错误。

2. 代码行为逻辑解释 #

• 移除SecondChild或调换导出顺序的影响：
  当index.ts中导出顺序变化时，模块初始化的触发顺序也会改变。如果父类模块先被初始化，但它依赖的子类模块还未完成加载，父类中引用的子类可能处于未定义状态，反过来子类继承父类时，父类的构造器引用可能失效。移除SecondChild后，循环依赖的链条被打破，模块初始化顺序恢复正常，继承关系能正确建立。
• 合并文件后异常消失：
  两个子类放在同一文件时，属于同一个模块作用域，类的定义会按顺序执行，不存在跨模块的导入延迟，父类的引用始终有效，因此继承不会触发构造器错误。

保留父类工厂方法的修复方案 #

要继续使用父类中基于this类型的duplicate方法，同时解决循环依赖问题，可以尝试以下方式：

• 动态延迟导入：在工厂函数等运行时才需要子类的位置，使用import()动态导入，避免在模块顶层触发循环依赖；
• 调整模块结构：将父类与核心工厂逻辑放在同一模块，子类仅单向导入父类，避免父类反向依赖子类；
• TS类型导入：如果父类仅在类型层面依赖子类，使用import type导入类型，不会生成运行时导入代码，切断循环依赖的运行时链条。

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