Dynamically loading a typescript class (reflection for typescript)

As you are using TypeScript I'm assuming you want the loaded object to be typed. So here is the example class (and an interface because you are choosing to load one of many implementations, for example).

interface IExample {
    test() : string;
}

class Example {
    constructor (private a: string, private b: string) {

    }

    test() {
        return this.a + ' ' + this.b;
    }
}

So you would use some kind of loader to give you back an implementation:

class InstanceLoader {
    constructor(private context: Object) {

    }

    getInstance(name: string, ...args: any[]) {
        var instance = Object.create(this.context[name].prototype);
        instance.constructor.apply(instance, args);
        return instance;
    }
}

And then load it like this:

var loader = new InstanceLoader(window);

var example = <IExample> loader.getInstance('Example', 'A', 'B');
alert(example.test());

At the moment, we have a cast: <IExample> - but when generics are added, we could do away with this and use generics instead. It will look like this (bearing in mind it isn't part of the language yet!)

class InstanceLoader<T> {
    constructor(private context: Object) {

    }

    getInstance(name: string, ...args: any[]) : T {
        var instance = Object.create(this.context[name].prototype);
        instance.constructor.apply(instance, args);
        return <T> instance;
    }
}

var loader = new InstanceLoader<IExample>(window);

var example = loader.getInstance('Example', 'A', 'B');

Update

To get this to work in latest TypeScript you now need to cast the namespace to any. Otherwise you get an Error TS7017 Build:Element implicitly has an 'any' type because type '{}' has no index signature.

If you have a specific namespace/module, for all the classes you want to create, you can simply do this:

var newClass: any = new (<any>MyNamespace)[classNameString](parametersIfAny);

Update: Without a namespace use new (<any>window)[classname]()

In TypeScript, if you declare a class outside of a namespace, it generates a var for the "class function". That means it is stored against the current scope (most likely window unless you are running it under another scope e.g. like nodejs). That means that you can just do new (<any>window)[classNameString]:

This is a working example (all code, no namespace):

class TestClass
{
    public DoIt()
    {
        alert("Hello");
    }
}

var test = new (<any>window)["TestClass"]();
test.DoIt();

To see why it works, the generated JS code looks like this:

var TestClass = (function () {
    function TestClass() {
    }
    TestClass.prototype.DoIt = function () {
        alert("Hello");
    };
    return TestClass;
}());
var test = new window["TestClass"]();
test.DoIt();

This works in TypeScript 1.8 with ES6 module:

import * as handlers from './handler';

function createInstance(className: string, ...args: any[]) {
  return new (<any>handlers)[className](...args);
}

Classes are exported in handler module. They can be re-exported from other modules.

export myClass {};
export classA from './a';
export classB from './b';

As for passing module name in arugments, I can't make it work because ES6 module is unable to be dynamic loaded.

As of typescript 0.9.1, you can do something like this playground:

class Handler {
    msgs:string[];  
    constructor(msgs:string[]) {
        this.msgs = msgs;
    }
    greet() {
        this.msgs.forEach(x=>alert(x));
    }
}

function createHandler(handler: typeof Handler, params: string[]) {
    var obj = new handler(params);
    return obj;
}

var h = createHandler(Handler, ['hi', 'bye']);
h.greet();

One other way would be calling the file dynamically and new

// -->Import: it dynamically
const plug = await import(absPath);
const constructorName = Object.keys(plug)[0];

// -->Set: it
const plugin = new plug[constructorName]('new', 'data', 'to', 'pass');

@Maximiliano De Lorenzo - I really liked your answer but was disappointed at the time, because it did not use a string. (because I needed to dynamically fetch this class name from db or config)

Have since discovered how you could adjust to use a string:

// Note create the constructor type as a type rather than the interface.
type Ctor<T> = new (param: string) => T;
type stringToSvcClassMapper<T> = Record<string, Ctor<T>>

// Define the set of supported/existing service classes
const svcMap: stringToSvcClassMapper<any> = {
    'svc1': MyService,
    'svc2': AnotherClass
};

class ServiceFactory<T> {
  public createSvc(stringName: string, param: string): T {
    return new svcMap[stringName](param);
  }
}

I've found another way as in my case I don't have access to window.

Example class that want to be created:

class MyService {

  private someText: string;

  constructor(someText: string) {
    this.someText = someText;
  }

  public writeSomeText() {
    console.log(this.someText);
  }
}

Factory class:

interface Service<T> {
  new (param: string): T;
}

export class ServiceFactory<T> {

  public createService(ctor: Service<T>, param: string) {
    return new ctor(param);
  }

}

And then to create the instance using the Factory:

const factory: ServiceFactory<MyService> = new ServiceFactory<MyService>();
const service: MyService = factory.createService(MyService, 'Hello World');
service.writeSomeText();

function fromCamelCase(str: string) {
  return str
    // insert a '-' between lower & upper
    .replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}

async getViewModelFromName(name: string) {
    //
    // removes the 'ViewModel' part ('MyModelNameViewModel' = 'MyModelName').
    let index = name.indexOf('ViewModel');
    let shortName = index > 0 ? name.substring(0, index) : name;

    // gets the '-' separator representation of the camel cased model name ('MyModelName' = 'my-model-name').
    let modelFilename = fromCamelCase(shortName) + '.view-model';

    var ns = await import('./../view-models/' + modelFilename);

    return new ns[name]();
  }

or

declare var require: any; // if using typescript.

getInstanceByName(name: string) {
    let instance;

    var f = function (r) {
      r.keys().some(key => {
        let o = r(key);
        return Object.keys(o).some(prop => {
          if (prop === name) {
            instance = new o[prop];
            return true;
          }
        })
      });
    }
    f(require.context('./../view-models/', false, /\.view-model.ts$/));

    return instance;
}

In some special cases, it's reasonable to use eval:

namespace org {
  export namespace peval {
    export class MyClass {
      constructor() {

      }

      getText(): string {
        return 'any text';
      }
    }
  }
}

const instance = eval('new org.peval.MyClass();');

console.log(instance.getText());

Note: If it's not necessarily required you shouldn't use eval because it will execute the code contained by the string with the privileges of the caller. See: eval() - JavaScript | MDN

In safe cases when you know where the code string comes from and what it does (especially when you know that it doesn't come from user input) you can use it. In the described case above we use our knowledge about a TypeScript class name and its package to create a new instance.

Working in TypeScript 5.3.3 to dynamically fetch types at runtime and instantiate the class from a string at runtime

// Type helpers
type GlobalWindow = typeof globalThis & typeof window
type ClassFromString<K extends keyof GlobalWindow> = GlobalWindow[K]

// for just loading the types
type Example1 = ClassFromString<'Number'>

function classFromString<K extends keyof GlobalWindow>(className: K) {
  return (window[className])
}

const DynamicArray = classFromString('Array')
const myArray = new DynamicArray(10).fill(0).map((_, i) => i)

console.log(myArray)

Try it on the Typescript Playground!

TS solution using generics could look like:

Let's say that we have abstract class

export abstract class PaymentProcessor {
  constructor(protected amount: number) {}

  abstract process(): void;
}

We could have a lot of classes which extend the abstract class:

export class BankProcessor extends PaymentProcessor {
  process(): void {
    console.log(`Processed by Bank ${this.amount}`);
  }
}

export class CryptoProcessor extends PaymentProcessor {
  process(): void {
    console.log(`Processed by Crypto ${this.amount}`);
  }
}
....

Let's say that we have a factory class that generates instances dynamically:

export class PaymentProcessorFactory {
  static createProcessor<T extends PaymentProcessor>(
    processorClass: new (amount: number) => T,
    amount: number
  ): T {
    return new processorClass(amount);
  }
}

Then we can dynamically load TS class via

const bankProcessor = PaymentProcessorFactory.createProcessor(BankProcessor, 10);
const cryptoProcessor = PaymentProcessorFactory.createProcessor(CryptoProcessor, 20);
...

bankProcessor.process();
cryptoProcessor.process();

Also if you want to pass a string instead of class you can use Map

  processorMap: Map<string, new () => PaymentProcessor> = new Map([
    ['crypto', CryptoProcessor],
    ['bank', BankProcessor],
  ]);

  processorMap.get('crypto');
....

Can be tested here