如何在TypeScript中将类作为函数参数传递并打印类名

基础实现 #

通过构造函数的name属性即可直接获取类名，参数类型限定为基类的构造函数类型，保证只能传入基类和它的子类：

// 基类定义
class Base {
  // 基类公共逻辑
}

// 三个继承基类的子类
class Sub1 extends Base {}
class Sub2 extends Base {}
class Sub3 extends Base {}

// 接收类作为入参的函数
// 参数类型表示：所有可实例化、且实例属于Base类型的构造函数
function logClassName(cls: new (...args: any[]) => Base) {
  console.log('类名：', cls.name)
}

// 测试
logClassName(Base) // 输出 类名： Base
logClassName(Sub1) // 输出 类名： Sub1
logClassName(Sub2) // 输出 类名： Sub2
logClassName(Sub3) // 输出 类名： Sub3

混淆兼容方案 #

如果项目打包会开启代码混淆压缩，原生的name属性会返回混淆后的短字符，无法拿到原始类名，这种情况可以在类上添加静态属性存储固定类名：

class Base {
  static readonly CLASS_NAME = 'Base'
}

class Sub1 extends Base {
  // 重写静态属性，override关键字保证和基类属性名一致
  static override readonly CLASS_NAME = 'Sub1'
}
class Sub2 extends Base {
  static override readonly CLASS_NAME = 'Sub2'
}
class Sub3 extends Base {
  static override readonly CLASS_NAME = 'Sub3'
}

// 参数用typeof Base限定，自动继承静态属性的类型约束
function logClassName(cls: typeof Base) {
  console.log('类名：', cls.CLASS_NAME)
}

说明 #

• 用typeof Base和new (...args: any[]) => Base作为参数类型效果一致，都能实现只允许传入基类和子类的构造函数的类型校验。
• 不需要类型校验的场景可以直接把参数类型设为Function，但不推荐，会丢失TypeScript的类型安全能力。

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