web-dev-qa-db-fra.com

Carte ES6 en dactylographiée

Je crée une classe dans TypeScript qui a une propriété qui est une carte ES6 (ECMAscript 2016) comme ceci:

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

Comment déclarer un type de carte ES6 dans un texte dactylographié? 

javascripttypescripttypescript1.5
93
nicksrandall

EDIT (25 avril 2016): La réponse ci-dessous est ancienne et ne devrait pas être considérée comme la meilleure des réponses. TypeScript prend désormais en charge les cartes "en mode natif", de sorte qu'il permet simplement à ES6 Maps d'être utilisé lorsque la sortie est ES6. Pour ES5, il ne fournit pas de polyfill; vous devez les intégrer vous-même.

Pour plus d'informations, reportez-vous à réponse de mohamed hegazy ci-dessous } pour une réponse plus moderne, ou même à ce commentaire reddit pour une version courte.

À compter de la version 1.5.0 bêta, TypeScript ne prend pas encore en charge Maps . Il ne fait pas encore partie de la feuille de route .

La meilleure solution actuelle est un objet avec une clé et une valeur dactylographiées (parfois appelée hashmap). Pour un objet avec des clés de type string et des valeurs de type number:

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

Quelques mises en garde, cependant:

  1. les clés ne peuvent être que de type string ou number
  2. Peu importe ce que vous utilisez comme type de clé, car les nombres/chaînes sont toujours acceptés de manière interchangeable (seule la valeur est appliquée).

Avec l'exemple ci-dessus:

// 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
133
zeh

Voir le commentaire dans: https://github.com/Microsoft/TypeScript/issues/3069#issuecomment-99964139

TypeScript ne vient pas avec pollyfills intégré. c'est à vous de décidez quel pollyfill utiliser, le cas échéant. vous pouvez utiliser quelque chose comme es6Collection , es6-shims , corejs .. etc. Tous les TypeScript Le compilateur a besoin est une déclaration pour les constructions ES6 que vous voulez utilisation. vous pouvez tous les trouver dans cette librairie fichier .

voici la partie pertinente:

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;
113
mohamed hegazy

Voici un exemple:

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

Démo

32
Super Chafouin

Comment déclarer un type de carte ES6 dans un texte dactylographié?

Vous devez cibler --module es6. C'est malheureux et vous pouvez exprimer votre préoccupation ici: https://github.com/Microsoft/TypeScript/issues/2953#issuecomment-98514111

11
basarat

Yes Map est maintenant disponible dans TypeScript .. si vous regardez dans lib.es6.d.ts, vous verrez l'interface:

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;}

Son bon à utiliser comme un dictionnaire de chaînes, paires d'objets .. le seul inconvénient est que si vous l'utilisez pour attribuer des valeurs ailleurs avec Map.get (clé) le IDE comme Code vous donne des problèmes d’être possible non défini .. plutôt que de créer une variable avec une vérification is-définie .. transtypez simplement le type (en supposant que vous savez avec certitude que la carte a la paire clé-valeur)

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

Au minimum:

tsconfig:

 "lib": [
      "es2015"
    ]

et installez un polyfill tel que https://github.com/zloirock/core-js si vous voulez IE <11 support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Référence/Global_Objects/Carte

9
Nikos

TypeScript ne supporte pas encore Map.

Tableau de compatibilité ES6

3
Logan Tegman

Avec l’option lib config vous êtes en mesure de sélectionner Mapry dans votre projet. Ajoutez simplement es2015.collection à votre section lib. Si vous n'avez pas de configuration de bibliothèque, ajoutez-en une avec les valeurs par défaut et ajoutez es2015.collection. 

Donc, lorsque vous avez cible: es5, remplacez tsconfig.json par:

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

Ajoutez la propriété "target": "ESNEXT" au fichier tsconfig.json.

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

Pas sûr que ce soit officiel, mais cela a fonctionné pour moi dans TypeScript 2.7.1:

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

En simple Map<keyType, valueType>

0
Jonas Tomanga