J'essaie d'itérer sur une carte dactylographiée mais je continue à recevoir des erreurs et je n'ai pas encore trouvé de solution pour un problème aussi trivial.

Mon code est:

myMap : Map<string, boolean>;
for(let key of myMap.keys()) {
   console.log(key);
}

Et j'obtiens l'erreur:

Le type 'IterableIteratorShim <[string, boolean]>' n'est pas un type de tableau ou un type de chaîne.

Trace complète de la pile:

 Error: Typescript found the following errors:
  /home/project/tmp/broccoli_type_script_compiler-input_base_path-q4GtzHgb.tmp/0/src/app/project/project-data.service.ts (21, 20): Type 'IterableIteratorShim<[string, boolean]>' is not an array type or a string type.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/project/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/project/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/project/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/project/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/project/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

J'utilise angular-cli beta5 et dactylographié 1.8.10 et ma cible est es5. Est-ce que quelqu'un a eu ce problème?

Vous pouvez utiliser à la Map.prototype.forEach((value, key, map) => void, thisArg?) : voidplace

Utilisez-le comme ceci:

myMap.forEach((value: boolean, key: string) => {
    console.log(key, value);
});

es6

for (let [key, value] of map) {
    console.log(key, value);
}

es5

for (let entry of Array.from(map.entries())) {
    let key = entry[0];
    let value = entry[1];
}

Utilisez simplement la Array.from()méthode pour le convertir en Array:

myMap : Map<string, boolean>;
for(let key of Array.from( myMap.keys()) ) {
   console.log(key);
}

Utilisation des fonctions Array.from , Array.prototype.forEach () et flèche :

Parcourez les touches :

Array.from(myMap.keys()).forEach(key => console.log(key));

Répétez les valeurs :

Array.from(myMap.values()).forEach(value => console.log(value));

Parcourez les entrées :

Array.from(myMap.entries()).forEach(entry => console.log('Key: ' + entry[0] + ' Value: ' + entry[1]));

Cela a fonctionné pour moi. Version TypeScript: 2.8.3

for (const [key, value] of Object.entries(myMap)) { 
    console.log(key, value);
}

Selon les notes de publication de TypeScript 2.3 sur "Nouveau --downlevelIteration" :

for..of statements, Array Destructuring et Spread dans les expressions Array, Call et New prennent en charge Symbol.iterator dans ES5 / E3 si disponible lors de l'utilisation --downlevelIteration

Ce n'est pas activé par défaut! Ajoutez "downlevelIteration": trueà votre tsconfig.json, ou passez l' --downlevelIterationindicateur à tsc, pour obtenir une prise en charge complète de l'itérateur.

Avec cela en place, vous pouvez écrire for (let keyval of myMap) {...}et keyvalle type de sera automatiquement déduit.

Pourquoi est-ce désactivé par défaut? Selon le contributeur TypeScript @aluanhaddad ,

Elle est facultative car elle a un impact très significatif sur la taille du code généré, et potentiellement sur les performances, pour toutes les utilisations d'itérables (y compris les tableaux).

Si vous pouvez cibler ES2015 ( "target": "es2015"dans tsconfig.jsonou tsc --target ES2015) ou une version ultérieure, l'activation downlevelIterationest une évidence, mais si vous ciblez ES5 / ES3, vous pouvez effectuer une analyse comparative pour vous assurer que la prise en charge de l'itérateur n'affecte pas les performances (si c'est le cas, vous pourriez être mieux avec la Array.fromconversion ou forEachune autre solution de contournement).

Cela a fonctionné pour moi.

Object.keys(myMap).map( key => {
    console.log("key: " + key);
    console.log("value: " + myMap[key]);
});

J'utilise le dernier TS et le dernier nœud (v2.6 et v8.9 respectivement) et je peux faire:

let myMap = new Map<string, boolean>();
myMap.set("a", true);
for (let [k, v] of myMap) {
    console.log(k + "=" + v);
}

Vous pouvez également appliquer la méthode de carte de tableau à l'itérable Map.entries ():

[...myMap.entries()].map(
     ([key, value]: [string, number]) => console.log(key, value)
);

De plus, comme indiqué dans d'autres réponses, vous devrez peut-être activer l'itération de bas niveau dans votre tsconfig.json (sous les options du compilateur):

  "downlevelIteration": true,

Juste une explication simple pour l'utiliser dans un document HTML.

Si vous avez une carte de types (clé, tableau), vous initialisez le tableau de cette façon:

public cityShop: Map<string, Shop[]> = new Map();

Et pour l'itérer, vous créez un tableau à partir de valeurs clés.

Utilisez-le simplement comme un tableau comme dans:

keys = Array.from(this.cityShop.keys());

Ensuite, en HTML, vous pouvez utiliser:

*ngFor="let key of keys"

Dans cette boucle, vous obtenez simplement la valeur du tableau avec:

this.cityShop.get(key)

Terminé!

Sur Typescript 3.5 et Angular 8 LTS, il était nécessaire de convertir le type comme suit:

for (let [k, v] of Object.entries(someMap)) {
    console.log(k, v)
}

Si vous n'aimez pas vraiment les fonctions imbriquées, vous pouvez également parcourir les touches:

myMap : Map<string, boolean>;
for(let key of myMap) {
   if (myMap.hasOwnProperty(key)) {
       console.log(JSON.stringify({key: key, value: myMap[key]}));
   }
}

Notez que vous devez filtrer les itérations non clés avec le hasOwnProperty, si vous ne le faites pas, vous obtenez un avertissement ou une erreur.