TypeScript+Webpack环境下如何通过变量名动态创建类实例？

当然可以实现！你碰到的问题核心是Webpack的模块化机制：当你用import导入类时，Webpack会把这些模块封装在闭包中，不会自动挂载到全局window对象上，所以直接通过window[pageName]自然找不到对应的类。

原因拆解 #

你导入的Home、About类属于模块内部变量，Webpack打包后它们的作用域被限制在模块内，并没有暴露到全局window上，这也是模块化开发的规范——避免污染全局作用域，但同时也导致了你无法直接通过window访问这些类。

解决方案 #

下面提供两种可行的实现方式，推荐第一种更规范的方案：

方案1：维护类映射表（推荐）

手动创建一个对象，把需要动态实例化的类和对应的名称关联起来，既安全又符合模块化要求，还能享受TypeScript的类型检查：

// 先导入需要的类
import { Home } from "./Home"; 
import { About } from "./About";

// 创建类映射表，TypeScript会自动推导类型
const classMap = {
  Home,
  About
};

protected handleAfterInit(page: string) : void { 
  let instance: any; 
  const pageName: string = this.capitalizeFirstLetter(page); 
  
  // 从映射表中获取目标类
  const TargetClass = classMap[pageName as keyof typeof classMap];
  if (!TargetClass) {
    console.error(`不存在对应的类：${pageName}`);
    return;
  }
  
  // 直接用new创建实例，比你之前的写法更简洁
  instance = new TargetClass(); 
  console.log(instance); 
}

这个方案的优势：

• 类型安全：TypeScript会帮你校验pageName是否匹配映射表中的类名，避免拼写错误
• 无全局污染：完全在模块内部处理，不会影响全局作用域
• 易维护：新增类只需要在映射表中添加一行即可

方案2：手动挂载类到window（不推荐，适合小型场景）

如果你一定要通过window访问类，可以在导入后手动将它们挂载到全局对象上，但这种方式会污染全局作用域，大型项目不建议使用：

import { Home } from "./Home"; 
import { About } from "./About";

// 将类挂载到window，用类型断言绕过TS的类型检查
(window as any).Home = Home;
(window as any).About = About;

protected handleAfterInit(page: string) : void { 
  let instance: any; 
  const pageName: string = this.capitalizeFirstLetter(page); 
  
  const TargetClass = (window as any)[pageName];
  if (!TargetClass) {
    console.error(`不存在对应的类：${pageName}`);
    return;
  }
  
  instance = new TargetClass(); 
  console.log(instance); 
}

补充：简化实例创建代码 #

你之前用Object.create((window[pageName]).prototype); instance.constructor.apply(instance);的写法，完全可以用new TargetClass()替代，效果一致且更符合TypeScript的语法习惯。

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