Sto cercando di iterare su una mappa dattiloscritta ma continuo a ricevere errori e non sono ancora riuscito a trovare alcuna soluzione per un problema così banale.

Il mio codice è:

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

E ottengo l'errore:

Il tipo "IterableIteratorShim <[string, boolean]>" non è un tipo di matrice o un tipo di stringa.

Traccia stack completo:

 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)

Sto usando angular-cli beta5 e dattiloscritto 1.8.10 e il mio obiettivo è es5. Qualcuno ha avuto questo problema?

Potresti usare Map.prototype.forEach((value, key, map) => void, thisArg?) : voidinvece

Usalo in questo modo:

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

Usa semplicemente il Array.from()metodo per convertirlo in un Array:

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

Utilizzando Array.from , Array.prototype.forEach () e le funzioni freccia :

Itera sulle chiavi :

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

Iterare sui valori :

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

Scorri le voci :

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

Questo ha funzionato per me. Versione TypeScript: 2.8.3

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

Secondo le note di rilascio di TypeScript 2.3 su "Nuovo --downlevelIteration" :

for..of statements, Gli elementi Array Destructuring e Spread nelle espressioni Array, Call e New supportano Symbol.iterator in ES5 / E3 se disponibile quando si utilizza --downlevelIteration

Questo non è abilitato per impostazione predefinita! Aggiungi "downlevelIteration": trueal tuo tsconfig.json, o passa --downlevelIterationflag a tsc, per ottenere il supporto completo dell'iteratore.

Con questa impostazione, puoi scrivere for (let keyval of myMap) {...}e keyvalil tipo di verrà dedotto automaticamente.

Perché è disattivato per impostazione predefinita? Secondo il collaboratore di TypeScript @aluanhaddad ,

È opzionale perché ha un impatto molto significativo sulla dimensione del codice generato e potenzialmente sulle prestazioni per tutti gli usi degli iterabili (inclusi gli array).

Se puoi scegliere come target ES2015 ( "target": "es2015"in tsconfig.jsono tsc --target ES2015) o successivo, l'abilitazione downlevelIterationè un gioco da ragazzi, ma se stai prendendo di mira ES5 / ES3, potresti eseguire un benchmark per assicurarti che il supporto dell'iteratore non influisca sulle prestazioni (se lo fa, potresti essere migliore con la Array.fromconversione o forEacho qualche altra soluzione alternativa).

Questo ha funzionato per me.

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

Sto usando gli ultimi TS e node (rispettivamente v2.6 e v8.9) e posso fare:

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

Puoi anche applicare il metodo array map all'iterabile Map.entries ():

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

Inoltre, come notato in altre risposte, potresti dover abilitare l'iterazione di livello inferiore nel tuo tsconfig.json (sotto le opzioni del compilatore):

  "downlevelIteration": true,

Solo una semplice spiegazione per usarlo in un documento HTML.

Se hai una mappa dei tipi (chiave, array), inizializzi l'array in questo modo:

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

E per iterarlo, crei un array dai valori chiave.

Usalo semplicemente come un array come in:

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

Quindi, in HTML, puoi utilizzare:

*ngFor="let key of keys"

All'interno di questo ciclo, ottieni solo il valore dell'array con:

this.cityShop.get(key)

Fatto!

Su Typescript 3.5 e Angular 8 LTS, era necessario eseguire il cast del tipo come segue:

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

Se non ti piacciono molto le funzioni annidate, puoi anche iterare sui tasti:

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

Nota, devi filtrare le iterazioni non chiave con l'estensione hasOwnProperty , se non lo fai, ottieni un avviso o un errore.