Creating class instances by variables with Typescript

Question

Is it possible to convert the following piece of code to work with Typescript?

public shops: string[] = [
   "AShop",
   "BShop",
   "CShop",
];    

this.shops.forEach((shop, index) => {
    let instance = new window[shop](index);
    this.instances.push(instance);
});

The following approach doesn't work with Typescript because window is inexistent in the scope. I cannot compile it. (Although it would work with vanilla JS)

Is there a way to treat variable name shop in the loop as an expression and create a dynamic class based on it?

Try this: class BaseShop { } interface ShopContructor { new (index: number): BaseShop; } interface Window { [shop: string]: ShopContructor; } — timocov
– timocov, Commented Jan 11, 2017 at 20:57

timocov · Accepted Answer · 2017-01-11 21:33:57Z

1

Try this:

const shops: string[] = ["AShop", "BShop", "CShop"];

class BaseShop {
    public constructor(index: number) {
        console.log(index);
    }
 }

class AShop extends BaseShop { }
class BShop extends BaseShop { }
class CShop extends BaseShop { }

interface ShopContructor {
    new (index: number): BaseShop;
}

interface Window {
    AShop: ShopContructor;
    BShop: ShopContructor;
    CShop: ShopContructor;
    [shop: string]: ShopContructor;
}

window.AShop = AShop;
window.BShop = BShop;
window.CShop = CShop;

const instances: BaseShop[] = [];

shops.forEach((shop: string, index: number) => {
    let instance = new window[shop](index);
    instances.push(instance);
});

console.log(instances);

answered Jan 11, 2017 at 21:33

timocov

1,1661 gold badge6 silver badges16 bronze badges

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

2 Comments

Aris Over a year ago

Is there any way to get rid of window.AShop = AShop;? I would rather rely on a switch/case actually. Just wanted a magic trick to initialize all the array as a class.

timocov Over a year ago

You can add all classes to an array (instead of their names). const shops: ShopContructor[] = [AShop, BShop, CShop];

user1726343 · Accepted Answer · 2017-01-11 21:29:30Z

0

This is a weird structure, because if you have dynamic classes in the global scope you can't get good type checking for it at compile time. I'd suggest just using <any> here and getting it over with. If you expect certain type guarantees for the resulting instance, you should specify them explicitly using the variable type or casting:

this.shops.forEach((shop, index) => {
    let instance = new (<any>window)[shop](index);
    this.instances.push(instance);
});

answered Jan 11, 2017 at 21:29

user1726343

4 Comments

Aris Over a year ago

Uncaught TypeError: window[shop] is not a function :(

user1726343 Over a year ago

@Aris But I don't have window[shop] in this code. I changed it to (<any>window)[shop].

timocov Over a year ago

@AsadSaeeduddin (<any>window)[shop] is compiled to window[shop]

user1726343 Over a year ago

@timocov Ah, I didn't realize this was a runtime error! So the OP doesn't even have the constructor functions in the global scope? Where are they?

Collectives™ on Stack Overflow

Creating class instances by variables with Typescript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related