How to type an array with classes in TypeScript?

There is a working typescript playground (run it to get alert with result)

what we need is to create a custom type InterfaceComponent. That will be expected as an array of the init() method

interface IComponent { }
class TopBar    implements IComponent { }
class StatusBar implements IComponent { }
class MainArea  implements IComponent { }

// this is a type we want to be passed into INIT as an array
type InterfaceComponent = (typeof TopBar | typeof StatusBar | typeof MainArea);

class MyClass {

  components: {[key:string] : IComponent } = {};

  init(params: (InterfaceComponent)[]): void {
    params.map((component) => {
        let comp = new component();
        this.components[comp.constructor["name"]] = comp;
    }, this);
  }
}

let x = new MyClass();
x.init([TopBar, StatusBar, MainArea])

alert(JSON.stringify(x.components))

Check it here


Typescript supports Class Type Generics (TypeScript Docs). Their example is:

function create<T>(c: {new(): T; }): T {
    return new c();
}

Which says "Pass into my create method a class that when constructed will return the type T that I want". This signature will prevent you from trying to pass in any class type that isn't of type T.

This is close to what we want, we just need to adjust for it being an array of items and items of your IComponent.

public init(components: {new(): IComponent;}[]): void {
    // at this point our `components` variable is a collection of
    // classes that implement IComponent

    // for example, we can just new up the first one;
    var firstComponent = new components[0]();
}, this);

With the method signature, we can now use it like

app.init([TopBar, StatusBar, MainArea]);

Where we pass in the array of types that implement IComponent