Akzeptieren Array von Schnittstellen ODER einzelne Schnittstelle in TypeScript

Question

Wirklich neu in TypeScript. Ich habe eine Reihe von Voreinstellungen, die der Benutzer hinzufügen oder ändern kann. Da es nur ein paar Tasten hat, habe ich eine Schnittstelle erstellt.

interface IStylePreset { 
    type : string; 
    backgroundColor : string; 
    color? : string 
} 

Und die Umsetzung ist hier:

static stylePresets : Array<IStylePreset> = [ 
    { type: "default", backgroundColor: "#37474f" , color: "#ECEFF1"}, 
    { type: "success", backgroundColor: "#37474f", color: "#ECEFF1" }, 
    { type: "error", backgroundColor: "#d32f2f", color: "#EEE"} 
]; 

Jetzt habe ich eine Config-Funktion, die eine benutzerdefinierte Vorgabe nimmt entweder vorhandene Voreinstellungen ändern oder neue hinzufügen.

static config = { 
    types(newPresets) : void { 
     newPresets = [].concat(newPresets); 
     for(var i = 0, len = newPresets.length, current; i< len; i++){ 
      var pos = Message.Util.find(Message.stylePresets, newPresets[i].type) 
      current = newPresets[i]; 
      if(pos !== -1) for(var key in current) Message.stylePresets[pos][key] = current[key]; 
      else Message.stylePresets[Message.stylePresets.length] = current; 
      } 
     } 
    }; 

Das Problem ist, kann ich nicht herausfinden, was in der Art der newPresets zu spezifizieren, da es sowohl eine Reihe von Objekten und auch als ein einziges Objekt zu akzeptieren (die zu einer einzigen Elementanordnung macht newPresets = [].concat(newPresets);) .

Ich versuche, TypeScript zu lernen, und ich weiß nicht, ob das, was ich mache, richtig ist. Kann mir bitte jemand hier helfen? Weiterführende Literatur oder Dokumente wären Gold.

Answer 1

Verwenden Sie ein TypeScript union type: IStylePreset | IStylePreset[].

Im Funktionskörper können Sie mit Array.isArray() überprüfen, ob ein Array oder eine einzelne Instanz übergeben wurde. Eigentlich in diesem Fall nicht concat() bereits intern prüfen, ob ein Array oder eine Instanz verknüpft ist, so dass die Lösung einfach:

ZB:

class Config { 
    private presets: IStylePreset[] = []; 

    public addPresets(presetOrArray: IStylePreset | IStylePreset[]) { 
     // Concat will concat either Array or instance 
     this.presets = this.presets.concat(presetOrArray); 
    } 

    public getPresets(): IStylePreset[] { 
     return this.presets; 
    } 
} 

let config = new Config(); 
config.addPresets(stylePresets); 
config.addPresets(stylePresets[0]); 
console.log(config.getPresets().length); // prints 4 

Answer 2

Sie könnte entweder:

1) verwenden, um die any Typ wie folgt aus: types(newPresets : any)

oder

2) halten den IStylePreset[] Typ (zB types(newPresets : IStylePreset[]) und wenn nur ein einzelnes Objekt vorbei wickeln Sie es in Ein Array wie dieses: config.types([{ type: "default", backgroundColor: "#37474f" , color: "#ECEFF1"}]);