Wie ein Array mit Klassen in TypeScript eingeben?

Question

Ich habe eine Anwendung, die durch Ausführen seiner Methode .init(params) wie folgt initialisiert:

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

Wo TopBar, StatusBar und MainArea Klassen sind nicht Instanzen von Klassen. Jede dieser Klassen implementiert die gleiche Schnittstelle IComponent.

Ich möchte Objekte aus den übergebenen Klassen in der .init(params) Methode instanziiert, wie folgt aus:

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

Das Problem ist, dass, da diese nicht Instanz sind, nicht Typoskript nicht ihre Typen kennen und wirft einen Fehler:

error TS2345: Argument of type '(typeof TopBar | typeof StatusBar | typeof MainArea)[]' is not assignable to parameter of type 'IComponent[]'.

Wie repariere ich den Code, so dass ich ein Array von Klassen übergeben könnte, die eine Schnittstelle zu einer Methode implementieren?

Answer 1

Es gibt einen working typescript playground (führen Sie es mit Alarm zu bekommen)

, was wir brauchen, ist eine benutzerdefinierte type InterfaceComponent zu erstellen. Das wird als ein Array der init() Verfahren zu erwarten

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)) 

prüft es here

Answer 2

Vielleicht könnten Sie den Typ comp als InterfaceComponent angeben.

var comp: InterfaceComponent = new component(); 
this.components[comp.constructor.name] = comp; 

Answer 3

Verwenden Sie stattdessen eine Factory-Methode. Die Erklärung ist ein bisschen unbeholfen, aber die Idee funktioniert:

interface InterfaceComponent { 
    name: string; 
} 

class TopBar implements InterfaceComponent { 
    name: string; 
} 

class StatusBar implements InterfaceComponent { 
    name: string; 
} 

class MainArea implements InterfaceComponent { 
    name: string; 
} 

interface InterfaceComponentFactory { 
    create:() => InterfaceComponent; 
} 

function init(params: InterfaceComponentFactory[]): void { 
    params.map(function (component) { 
     let comp = component.create(); 
     this.components[comp.name] = comp; 
    }, this); 
} 

init([{ create:() => new TopBar() }, { create:() => new StatusBar() }, { create:() => new MainArea() }]);