ES6-Karte in Typoskript

Ich erstelle eine Klasse in Typoskript mit einer Eigenschaft, die eine ES6-Map (ECMAscript 2016) ist, wie folgt:

class Item {
  configs: ????;
  constructor () {
    this.configs = new Map();
  }
}

Wie deklariere ich einen ES6-Map-Typ in Typoskript?

BEARBEITEN (5. Juni 2019): Während die Idee, dass "TypeScript Mapnativ unterstützt ", immer noch wahr ist, unterstützt TypeScript in Version 2.1 etwas, das so genannt wird Record.

type MyMapLikeType = Record<string, IPerson>;
const peopleA: MyMapLikeType = {
    "a": { name: "joe" },
    "b": { name: "bart" },
};

Leider wird der erste generische Parameter (Schlüsseltyp) immer noch nicht vollständig berücksichtigt: Selbst bei einem stringTyp ist so etwas wie peopleA[0](a number) immer noch gültig.

BEARBEITEN (25. April 2016): Die Antwort unten ist alt und sollte nicht als die beste Antwort angesehen werden. TypeScript unterstützt Maps jetzt "nativ", sodass ES6-Maps einfach verwendet werden können, wenn die Ausgabe ES6 ist. Für ES5 werden keine Polyfills bereitgestellt. Sie müssen sie selbst einbetten.

Weitere Informationen finden Sie in der Antwort von mohamed hegazy unten, um eine modernere Antwort zu erhalten, oder sogar in diesem reddit-Kommentar für eine Kurzversion.

Ab der Beta-Version 1.5.0 unterstützt TypeScript Maps noch nicht . Es ist auch noch nicht Teil der Roadmap .

Die derzeit beste Lösung ist ein Objekt mit eingegebenem Schlüssel und Wert (manchmal auch als Hashmap bezeichnet). Für ein Objekt mit Schlüsseln vom Typ stringund Werten vom Typ number:

var arr : { [key:string]:number; } = {};

Einige Einschränkungen jedoch:

1. Schlüssel können nur vom Typ stringoder seinnumber
2. Es spielt eigentlich keine Rolle, was Sie als Schlüsseltyp verwenden, da Zahlen / Zeichenfolgen immer noch austauschbar akzeptiert werden (nur der Wert wird erzwungen).

Mit dem obigen Beispiel:

// OK:
arr["name"] = 1; // String key is fine
arr[0] = 0; // Number key is fine too

// Not OK:
arr[{ a: "a" }] = 2; // Invalid key
arr[3] = "name"; // Invalid value

Siehe Kommentar in: https://github.com/Microsoft/TypeScript/issues/3069#issuecomment-99964139

TypeScript wird nicht mit integrierten Pollyfills geliefert. Es liegt an Ihnen, zu entscheiden, welche Pollyfill gegebenenfalls verwendet werden soll. Sie können so etwas wie es6Collection , es6- shims , corejs ..etc verwenden. Der Typescript-Compiler benötigt lediglich eine Deklaration für die ES6-Konstrukte, die Sie verwenden möchten. Sie finden sie alle in dieser lib-Datei .

Hier ist der relevante Teil:

interface Map<K, V> {
    clear(): void;
    delete(key: K): boolean;
    entries(): IterableIterator<[K, V]>;
    forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
    get(key: K): V;
    has(key: K): boolean;
    keys(): IterableIterator<K>;
    set(key: K, value?: V): Map<K, V>;
    size: number;
    values(): IterableIterator<V>;
    [Symbol.iterator]():IterableIterator<[K,V]>;
    [Symbol.toStringTag]: string;
}

interface MapConstructor {
    new <K, V>(): Map<K, V>;
    new <K, V>(iterable: Iterable<[K, V]>): Map<K, V>;
    prototype: Map<any, any>;
}
declare var Map: MapConstructor;

Hier ist ein Beispiel:

this.configs = new Map<string, string>();
this.configs.set("key", "value");

Demo

Ja, Map ist jetzt in Typoskript verfügbar. Wenn Sie in lib.es6.d.ts nachsehen, sehen Sie die Oberfläche:

interface Map<K, V> {
  clear(): void;
  delete(key: K): boolean;
  forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void,thisArg?: any): void;
  get(key: K): V | undefined;
  has(key: K): boolean;
  set(key: K, value: V): this;
  readonly size: number;} 

Es ist großartig, es als Wörterbuch für Zeichenfolgen und Objektpaare zu verwenden. Das einzige Ärgernis ist, dass der IDE-ähnliche Code Ihnen Probleme gibt , wenn Sie es verwenden, um Werte an anderer Stelle mit Map.get (Schlüssel) zuzuweisen Erstellen einer Variablen mit einer definierten Prüfung. Geben Sie einfach den Typ um (vorausgesetzt, Sie wissen, dass die Karte das Schlüssel-Wert-Paar enthält).

class myclass {
   mymap:Map<string,object>
   ...
   mymap = new Map<string,object>()
   mymap.set("akey",AnObject)
   let objectref = <AnObject>mymap.get("akey")

Wie deklariere ich einen ES6-Map-Typ in Typoskript?

Sie müssen zielen --module es6. Dies ist unglücklich und Sie können hier Ihre Bedenken äußern: https://github.com/Microsoft/TypeScript/issues/2953#issuecomment-98514111

Als absolutes Minimum:

tsconfig:

 "lib": [
      "es2015"
    ]

und installieren Sie eine Polyfüllung wie https://github.com/zloirock/core-js, wenn Sie IE <11-Unterstützung wünschen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /Karte

Ich bin mir nicht sicher, ob dies offiziell ist, aber dies hat bei mir in Typoskript 2.7.1 funktioniert:

class Item {
   configs: Map<string, string>;
   constructor () {
     this.configs = new Map();
   }
}

In einfachen Worten Map<keyType, valueType>

Mit der Option lib config können Sie Map in Ihr Projekt aufnehmen. Fügen es2015.collectionSie einfach Ihren lib-Bereich hinzu. Wenn Sie keine lib-Konfiguration haben, fügen Sie eine mit den Standardeinstellungen hinzu und fügen Sie hinzu es2015.collection.

Wenn Sie also das Ziel: es5 haben, ändern Sie tsconfig.json in:

"target": "es5",
"lib": [ "dom", "es5", "scripthost", "es2015.collection" ],

Typescript wird noch nicht unterstützt Map.

ES6-Kompatibilitätstabelle

Fügen Sie "target": "ESNEXT"der tsconfig.jsonDatei eine Eigenschaft hinzu .

{
    "compilerOptions": {
        "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    }
}