在打字稿中创建动态 class 个实例

Question

我正在使用 webpack、typescript 2.8、es5。

我想从变量名创建动态 class 实例，例如：

protected handleAfterInit(page) : void 
{

    let instance: any;
    let pageName: string = this.capitalizeFirstLetter(page);

    console.log(pageName);

    instance = Object.create((window[pageName]).prototype);
    instance.constructor.apply(instance);

    console.log(instance);
}

其中 pageName 是一个变量（主页、关于等）并且那些 classes 已经导入到页面顶部：

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

但是使用当前代码我得到一个错误：

Cannot read property 'prototype' of undefined

好像没有window.{class}

是否可以在打字稿中做这样的事情？

Answer 1

window[pageName] 获取名为 pageName.

的全局变量

模块中的变量或导入不会创建全局变量，因此不会起作用。

相反，您应该创建自己的地图：

const pages = {Home, About};
pages[pageName]

Answer 2

由于您从模块导入 classes Home 和 About，它们不在 window 对象中。

最简单的方法是使用构造函数签名：

protected handleAfterInit(page: new () => any): void {
    let instance = new page()
}

如果您需要按名称访问页面，您可以创建一个包含页面的地图，然后调用上面的方法：

pagesByName : { [name: string] :new () => any } = {Home, About};
protected handleAfterInitByName(pageName: string): void {
    this.handleAfterInit(this.pagesByName [pageName]);
}

您还可以将 new () => any 中的 any 替换为所有页面的基础 class，以便更好地进行类型检查。

Answer 3

如果你是导入类，你应该把它们放在你自己的对象中，然后用它来构造新的实例：

const constructors = {Home, About, ...};
const instance = constructors[pageName](); // pageName should be 'Home', 'About' ...

在打字稿中创建动态 class 个实例

Create dynamic class instances in typescript

ecmascript-5

typescript