Create dynamic class instances in typescript

Question

I am working with webpack, typescript 2.8, es5.

I want to create dynamic class instances from variable names for example:

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);
}

Where pageName is a variable (Home, About etc) and those classes are already imported on top of the page:

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

But with current code I get an error:

Cannot read property 'prototype' of undefined

It seems that there is no window.{class}

Is it possible to do something like this in typescript?

Titian Cernicova-Dragomir · Accepted Answer · 2018-03-23 15:15:09Z

1

Since you import the classes Home and About from a module they are not in the window object.

The simplest way to do this, would be to use a constructor signature:

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

If you need access pages by name you can create a map with pages and then call the avbove method:

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

Also you can replace the any in new () => any with a base class for all pages to give yo better type checking.

answered Mar 23, 2018 at 15:15

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLaks · Accepted Answer · 2018-03-23 15:08:45Z

0

window[pageName] gets the global variable named pageName.

Variables or imports in modules do not create global variables, so that won't work.

Instead, you should create your own map:

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

answered Mar 23, 2018 at 15:08

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Oscar Paz · Accepted Answer · 2018-03-23 15:16:17Z

0

If you are importing the classes, you should put them in your own object, and then use it to construct new instances:

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

answered Mar 23, 2018 at 15:16

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Create dynamic class instances in typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related