Generating instances of classes using variables in Typescript

Question

Generating instances of classes using variables in Typescript

Are there methods to modify the below piece of code in order for it to be compatible with Typescript?

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

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

The current method is not functional with Typescript due to the absence of window within the scope. It cannot be compiled under these circumstances. (Even though it is effective with vanilla JS)

How can the variable name shop within the loop be treated as an expression to generate a dynamic class from it?

typescript

Answer 1

Answer №1

Give this a shot:

const stores: string[] = ["StoreA", "StoreB", "StoreC"];

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

class StoreA extends BaseStore {}
class StoreB extends BaseStore {}
class StoreC extends BaseStore {}

interface StoreConstructor {
    new (index: number): BaseStore;
}

interface Window {
    StoreA: StoreConstructor;
    StoreB: StoreConstructor;
    StoreC: StoreConstructor;
    [store: string]: StoreConstructor;
}

window.StoreA = StoreA;
window.StoreB = StoreB;
window.StoreC = StoreC;

const instances: BaseStore[] = [];

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

console.log(instances);

Answer 2

Give this a shot:

const stores: string[] = ["StoreA", "StoreB", "StoreC"];

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

class StoreA extends BaseStore {}
class StoreB extends BaseStore {}
class StoreC extends BaseStore {}

interface StoreConstructor {
    new (index: number): BaseStore;
}

interface Window {
    StoreA: StoreConstructor;
    StoreB: StoreConstructor;
    StoreC: StoreConstructor;
    [store: string]: StoreConstructor;
}

window.StoreA = StoreA;
window.StoreB = StoreB;
window.StoreC = StoreC;

const instances: BaseStore[] = [];

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

console.log(instances);

Answer 3

Answer №2

This structure is quite unique because it presents a challenge when it comes to achieving proper type checking at compile time due to the dynamic classes in the global scope. One possible solution could be to simply use <any> and move on. However, if you require specific type guarantees for the resulting instance, it's recommended to explicitly specify them using variable types or casting:

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

Answer 4

This structure is quite unique because it presents a challenge when it comes to achieving proper type checking at compile time due to the dynamic classes in the global scope. One possible solution could be to simply use <any> and move on. However, if you require specific type guarantees for the resulting instance, it's recommended to explicitly specify them using variable types or casting:

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

Generating instances of classes using variables in Typescript

Answer №1

Answer №2

Similar questions

`Is it possible to integrate npm libraries with typescript and ES6?`

Transformation of Ionic 2 ScreenOrientation Plugin

Having issues with Angular material autocomplete feature - not functioning as expected, and no error

Angular fails to show route after successful login

Is it possible to simultaneously update two entities using a single endpoint?

Error: The function setIsEnabled does not exist

I must remove the thumb from the input range control

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

What is the best way to modify the underline style of a tab in Material UI?

Downloading a PDF in a Next.js application

Implementing tailwindcss styles in a typescript interface with reactjs

When a class decorator is returned as a higher-order function, it is unable to access static values

Methods for resolving a ViewStyle typescript issue in react native

Managing Observable<Person[]> in ng-bootstrap typeahead instead of Observable<string[]>: a complete guide

NodeJS on Cloudlinux requires that the node modules for applications be stored in a distinct folder (virtual environment) designated by a symbolic link known as "node_modules"

Guide to developing a personalized useReducer with integrated decision-making and event activation

angular directive to receive an object

When a checkbox is clicked, how can we use Angular 4 to automatically mark all preceding checkboxes as checked?

What is the best way to access a component's data within its method using Vue and Typescript?

Creating a setup with Angular 2+ coupled with Webpack and a Nodejs