2016-05-25 18 views
9

Stavo dando un'occhiata ad AngularJS 2 e Typescript e ho deciso di fare qualcosa con questo solo per imparare le basi di Typescript. Con molte ricerche ho trovato buoni argomenti sui moduli, Typescript, e uno di loro stava parlando del comando 'let' e 'var' per dichiarare le variabili; secondo il this domanda, il codice tipografico qui sotto dovrebbe visualizzare un solo vigile e genera un errore nella console:'let e' var 'sono gli stessi in Typescript?

test.ts:

for(let i = 0; i < 1; i++) { 
    alert(i); 
} 
alert(i); 

test.js compilato:

for(var i = 0; i < 1; i++) { 
    alert(i); 
} 
alert(i); 
//# sourceMappingURL=test.js.map 

Ma non lo è. Il compilatore "ignora" il comando "let" e lo trasforma nel comando "var". Perché succede? Typescript funziona solo correttamente con le classi?

sto usando la configurazione AngularJS per 'inizio NPM', quindi compila il file 'test.ts' automaticamente:

"scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
+0

Altro su 'let' a macchina: https: // basarat .gitbooks.io/typescript/content/docs/let.html – basarat

risposta

11

ma non lo è. Il compilatore "ignora" il comando "let" e lo trasforma nel comando "var". Perché succede? Typescript funziona solo correttamente con le classi?

Il compilatore di default traspone in ES3. La parola chiave let non esiste in ES3 e quindi l'emettitore deve emettere il codice utilizzando la sintassi disponibile in ES3 ... in questo caso la migliore sostituzione per la parola chiave let è la parola chiave var.

Se si vuole che emettono con la parola chiave let, allora si deve indirizzare ES6- "target": "es6" in tsconfig.json o la riga di comando opzione --target es6. Ciò verrà generato con lo stesso codice immesso.

Nota che, anche se il codice funziona in fase di esecuzione, si genera un errore per farvi sapere che avete fatto un errore in fase di compilazione:

for(let i = 0; i < 1; i++) { 
    alert(i); 
} 
alert(i); // compile error: cannot find name 'i' 
2

In questo esempio, var e let avere lo stesso effetto, con var essere un po 'più veloce sulla maggior parte dei motori JS, quindi TypeScript esegue alcune ottimizzazioni delle prestazioni modificandole in un var.

Ora, se si tenta un esempio diverso, vedrete che let non è solo cambiato in var, ma più magia accade:

for (let i = 0; i < 3; i++) { 
    setTimeout(function() { alert(i); }); 
} 

Infatti in questo esempio let e var non avrebbe lo stesso effetto. let visualizzerebbe 1 2 3 mentre si utilizza var vedremmo 3 3 3. Se volete saperne di più sulla parola let introdotto da ES6 è possibile controllare questo:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let

+0

'i <1' Quindi zero (0)? * Up * that to' i <5' in modo che le persone possano davvero vedere la magia. Forse offrire lo stesso ciclo usando 'var' per confrontare le differenze. Solo un suggerimento. – Marcus

+0

Penso che non sia lo stesso. Se eseguo il mio esempio in puro JS, console mi dà un errore e viene visualizzato un solo avviso come mi aspettavo. Se lo metto su TS e lo compilo, mostra entrambi gli avvisi perché trasforma il "let" in "var". Quindi non sto ottenendo gli stessi risultati con gli stessi codici solo perché TS non accetta la parola 'let'. –

+0

@Marcus qui il numero di iterazioni non cambia il punto: la transpilation è totalmente diversa quando lasciamo la pila con setTimeout, anche se è una sola volta. Potete vedere che usando https://www.typescriptlang.org/play/ – floribon

0

Sono identici ma c'è una differenza quando hanno usato all'interno di una funzione.

LET

function theDifference(){ 
    for(let emre = 0; emre < 10; emre++){ 
    // emre is only visible inside of this for() 
    } 

// emre is NOT visible here. 
} 

VAR

function theDifference(){ 
    for(var emre = 0; emre < 10; emre++){ 
    // emre is visible inside of this for() 
    } 

// emre is visible here too. 
} 
+0

Questo non è un buon esempio. Il compilatore Typescript si lamenterà, ma 'emre' è ancora visibile al di fuori di' for' nell'esempio 'let'. – JohnnyHK

Problemi correlati