如何通过类名字符串在JavaScript/TypeScript中实例化类？

在TS/JS中实现基于类名字符串的类实例化，核心是建立字符串与类的映射关系，以下是几种实用方案：

1. 手动维护类映射表（推荐，类型安全） #

直接创建类名字符串到类的映射对象，适合扩展类数量可控的场景：

// 定义抽象基类
abstract class BaseExtension {
  constructor(public config: Record<string, any>) {}
}

// 示例扩展类
class LogExtension extends BaseExtension {}
class AuthExtension extends BaseExtension {}

// 建立类名与类的映射
const extensionMap: Record<string, typeof BaseExtension> = {
  LogExtension,
  AuthExtension
};

// 从配置加载并实例化扩展
function loadExtension(config: { className: string; configData: Record<string, any> }) {
  const ExtensionClass = extensionMap[config.className];
  if (!ExtensionClass) {
    throw new Error(`扩展类不存在: ${config.className}`);
  }
  return new ExtensionClass(config.configData);
}

// 使用示例
const logConfig = { className: "LogExtension", configData: { logLevel: "info" } };
const logExtension = loadExtension(logConfig);

2. 模块自动生成映射（适合大量扩展类） #

如果扩展类集中在某个目录，可通过模块批量导入生成映射，避免手动维护：

import * as extensionModules from './extensions'; // 导入所有扩展模块

const extensionMap: Record<string, typeof BaseExtension> = {};

// 遍历模块导出，筛选继承自BaseExtension的类
for (const [className, clazz] of Object.entries(extensionModules)) {
  if (clazz.prototype instanceof BaseExtension) {
    extensionMap[className] = clazz;
  }
}

// 实例化逻辑同方案1

3. TypeScript类型强化 #

通过类型别名约束配置中的类名字段，避免拼写错误：

// 从映射表提取合法类名类型
type ValidExtensionName = keyof typeof extensionMap;

// 约束配置类型
type ExtensionConfig = {
  className: ValidExtensionName;
  configData: Record<string, any>;
};

// 错误类名将触发编译报错
const invalidConfig: ExtensionConfig = {
  className: "InvalidExt", // TypeScript编译错误
  configData: {}
};

避坑提示 #

• 禁止使用eval()或window[className]：前者有安全风险，后者在模块化环境下类不会挂载到全局对象，无法生效。
• TS项目确保编译选项target ≥ ES6，否则类的原型链判断可能异常。

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