基于Rollup构建动态切换子类实现，期望简化类调用方式

问题背景 #

需要根据构建环境变量buildEnv切换底层实现类，对外完全隐藏细节，允许外部直接通过new MainClass()的方式实例化，但当前实现中MainClass构造函数内调用this.fn()会报错，且子类的方法、属性无法获得类型提示。

原错误代码（修正supper拼写错误后）：

class subA {
  protected fn() {
    console.log('subA');  
  }
}
class subB {
  protected fn() {
    console.log('subB');  
  }
}

const buildEnv = 'A';
function changeSubClass() {
   return buildEnv === 'A' ? subA : subB;
}

const BaseClass = changeSubClass();
class MainClass extends BaseClass {
  constructor() {
    super();
    this.fn(); // TS报错：无法识别this上存在fn方法
  }
}

// 期望用法：
const clsIns = new MainClass();

问题原因 #

TypeScript无法自动推断changeSubClass()返回的subA和subB具有共同的fn方法签名，因此MainClass继承动态返回的BaseClass后，this的类型不包含fn，导致报错和类型提示缺失。

解决方案 #

方案1：用抽象基类约束子类类型

先定义一个抽象基类，强制所有底层实现类继承并实现指定方法，让TypeScript明确识别共同类型：

// 抽象基类，定义所有子类必须实现的方法
abstract class BaseImpl {
  protected abstract fn(): void;
}

class subA extends BaseImpl {
  protected fn() {
    console.log('subA');  
  }
}

class subB extends BaseImpl {
  protected fn() {
    console.log('subB');  
  }
}

const buildEnv = 'A';
// 明确函数返回类型为抽象基类的构造函数类型
function changeSubClass(): typeof BaseImpl {
   return buildEnv === 'A' ? subA : subB;
}

const BaseClass = changeSubClass();
class MainClass extends BaseClass {
  constructor() {
    super();
    this.fn(); // 无报错，TS能正确识别fn方法并给出提示
  }
}

// 直接实例化，符合需求
const clsIns = new MainClass();

方案2：用接口+类型断言（无需抽象类）

如果不想引入抽象基类，可以通过接口定义构造函数类型，再用类型断言告诉TypeScript返回类的结构：

// 定义接口，约束构造函数返回的实例包含fn方法
interface BaseConstructor {
  new (): {
    fn(): void;
  }
}

class subA {
  protected fn() {
    console.log('subA');  
  }
}

class subB {
  protected fn() {
    console.log('subB');  
  }
}

const buildEnv = 'A';
function changeSubClass() {
   // 断言返回类型为BaseConstructor，让TS识别共同方法
   return (buildEnv === 'A' ? subA : subB) as unknown as BaseConstructor;
}

const BaseClass = changeSubClass();
class MainClass extends BaseClass {
  constructor() {
    super();
    this.fn(); // 无报错，类型提示正常
  }
}

const clsIns = new MainClass();

方案优势 #

• 两种方案都保持了new MainClass()的直接实例化方式，对外完全隐藏了底层实现的切换逻辑。
• 解决了类型报错和方法/属性提示缺失的问题，符合TypeScript的类型检查规范。

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