Create instance from class string in Typescript/Angular2

Question

I have been looking into creating classes from strings in Javascript, until I came across this:

var instance = new window[classString]();

However, this does not seem to work in Typescript, since there is type information missing.

Details:

interface SomeInterface{
  structuredData: any;
}

class A implements SomeInterface {

}

I am storing JSON serialized class information in a database. Let's say I have a model class A, that class's properties are serialized as JSON string in the frontend and sent to the database along with the class name that represents this data, i.e. the database contains a class_type column that contains the name of the class. In this case that would be the string 'A'. Now, I would like to get that data back into my application and dynamically construct an instance from that data.

If we look at the Javascript instantiation code I found above, I would love to do something like this:

let instance = new window['A']();
instance.structuredData = foo;

Since those classes contain generic parameters that adhere to a certain interface I would be able to assign the serialized data to those newly instantiated instances.

I'm using Angular2/Webpack and would really appreciate any hints as to how to do this.

When using the code like I mentioned above, I get the following compiler error:

Cannot use 'new' with an expression whose type lacks a call or construct signature.

If I try to circumvent the strict type checking by using

declare var window;

I get the following error:

window['classString'] is not a constructor

I can't reproduce the error. If I put let instance = new window['A'](); in a standalone .ts file, it compiles fine. — Michael Liu
– Michael Liu, Commented Feb 25, 2017 at 16:57
@MichaelLiu Probably has something to do with webpack. My guess is that the class is not available in the global/window space ? — the_critic
– the_critic, Commented Feb 25, 2017 at 16:58

the_critic · Accepted Answer · 2017-02-25 17:16:07Z

3

Since Angular2 skillfully abstracts the involvement of Webpack, I don't know exactly how modules are loaded and processed in detail. However, my guess (as mentioned in the comments) is that the class is not available in the window/global space, thus I have come up with a solution that might be correct (tried it and works, but not sure if that's the correct way to do this type of thing):

// first I require the module that is named in snake case with a .ts
// suffix based on the string that is stored in the database
// so if the stored string is SomeThing, we require the file
// called 'some_thing.ts'. Note: using lodash to generate that string
const dynModule = require('./' + _.snakeCase(classTypeString));

// next, we get the constructor by the class name from that module
// which is exactly the string that we stored in the db
const klass = dynModule[classTypeString];

// now we have the constructor function of the class and can
// instantiate a new class from that
let instance: SomeInterface = new klass();

instance.structuredData = foo;

answered Feb 25, 2017 at 17:16

the_critic

12.8k19 gold badges71 silver badges117 bronze badges

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

1 Comment

Estus Flask Over a year ago

The error in the question is specific to Typescript and typing problems.

Marco Turi · Accepted Answer · 2017-03-27 00:07:13Z

1

You could put those classes inside the window object by yourself, even if you are inside other classes:

(window as any).example = class {}; // replace with you class
// and then later in code....
const classNameStr = 'example';
const init = new window[classNameStr]();

If you don't like to write inside the window object, you could store them in a object/dictionary somewhere in you code instead. Or simply use Eval (though it's not a good practice to use it):

eval(`new ${className}()`);

answered Mar 27, 2017 at 0:07

Marco Turi

751 silver badge9 bronze badges

Collectives™ on Stack Overflow

Create instance from class string in Typescript/Angular2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related