Generating an instance of a class by using the class name as a string

Question

Generating an instance of a class by using the class name as a string

Before jumping to conclusions, please take a moment to read the following:

In addition to TypeScript, my issue also involves Angular2.

Main Goal

I am in need of a method in app.component.ts that can take a string (Class Name) and generate an instance of that class. These classes are located in other ts files.

Scenario: I have a method

getWidgetObjectFromClassName(className : string) : Object{}

that is expected to return instances of the class name provided in string format. However, there is a problem.

I attempted to use Namespace and tried

let instance = new SampleNS['OtherName']();

(SampleNS being a namespace), which worked flawlessly in a single file scenario.

The Issue: Now that I have multiple ts files such as interfaces.ts, classes.ts, otherclasses.ts. I am utilizing export namespace SampleNS{} in interface.ts, all functioning correctly. Next, in classes.ts, I am using

/// <reference path="interfaces.ts" />

and the same namespace SampleNS.

Now, my method

getWidgetObjectFromClassName(className : string) : Object{}

resides in xyz.ts, and I am stuck on which import I should provide. The problem lies in the fact that I can only import the namespace from a single file, even though it is the same, thus limiting my ability to create instances to that specific file's namespace.

Plunker Link https://plnkr.co/edit/pt90F34KPsGoHDpSUQFD?p=preview

typescript angular typescript1.8

Answer 1

Answer №1

When importing, remember to utilize as like so:

import * as widgets from './lib';
...
this.widgetInstance = new widgets[className]();

Check out this Plunker example

I recall seeing this technique in a previous response, although I can't locate it now to offer proper attribution :-/

Answer 2

When importing, remember to utilize as like so:

import * as widgets from './lib';
...
this.widgetInstance = new widgets[className]();

Check out this Plunker example

I recall seeing this technique in a previous response, although I can't locate it now to offer proper attribution :-/

Answer 3

Answer №2

To instantiate an object from a class name, you can utilize the eval function:

class AnotherClass
{
    a: number;
    b: number;
    constructor() {
        this.a = this.b = 2;
    }
}

function getObjectFromClass(nameOfClass : string) : {}
{
    return eval("new " + nameOfClass + "();");
}

console.log("%o", getObjectFromClass("AnotherClass"));

Check out the sandbox

Answer 4

To instantiate an object from a class name, you can utilize the eval function:

class AnotherClass
{
    a: number;
    b: number;
    constructor() {
        this.a = this.b = 2;
    }
}

function getObjectFromClass(nameOfClass : string) : {}
{
    return eval("new " + nameOfClass + "();");
}

console.log("%o", getObjectFromClass("AnotherClass"));

Check out the sandbox

Generating an instance of a class by using the class name as a string

Answer №1

Answer №2

Similar questions

The functionality is verified in Postman, however, it is not functioning properly when accessed from my client's end

Guide: Implementing material-ui theme with redux in gatsby

Containerizing Next.js with TypeScript

Is there a way to retrieve keys of the object from this combination type?

Unable to link the second array to the angular-dual-listbox

Error in TypeScript: The property "component" is not found on the React MUI MenuItem

How can I personalize a Leaflet popup with image thumbnails and additional customization options?

Trouble with Angular not Displaying BootStrap 5.0 Styles

Utilizing Typescript generics with an optional second parameter

Encountering the following error message: "E11000 duplicate key error collection"

Declaration of React conditional props in TypeScript

Autoplay feature on Ionic 3 dynamic image slider pauses when manually sliding images

Setting up Windows authentication for an ASP.NET Core 6.0 and Angular project: A complete guide

retrieving class instances from a Firebase database

What is the process for retrieving an element from component interaction?

Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

The Angular2 framework will sometimes send an OPTIONS method request instead of an http.GET when

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

Difficulty retrieving information using AngularJS service post selection of item

Tips for setting up communication between UI and backend applications using Nginx reverse proxy in a Docker environment