Tempo di lettura: 5 minuti
Il linguaggio TypeScript è un super set del linguaggio Javascript ossia ne aggiunge nuove funzionalità.
Questo è Open Source ,viene compilato in javascript, ed è stato sviluppato da Microsoft nel 2012 con l’obbiettivo di ottenere un linguaggio front-end forte e robusto.
Un tentativo analogo è stato fatto da Google mediante il linguaggio Dart con il quale si basano linguaggi quali Gmail e Adwords, ma con scarsi risultati.
Nel giugno del 2015 è stata approvata in via ufficiale la versione ES6 di javascript(ECMASCRIPT 6), oggi ancora purtroppo non tutti i browser la supportano anche se va un po meglio nel mondo server con NODE JS.
Per capire o conoscere quali browser oggi supportano l’ultima versione di ES6 potete dare un’occhiata a questo link.
ECMASCRIPT6 presenta alcune caratteristiche già in parte adottate nel linguaggio TYPESCRIPT.
Quest’ultimo si basa in buona parte nell’attuale versione del linguaggio javascript, ereditandone sostanzialmente quasi tutte le caratteristiche come, ad esempio, la sintassi.
Inoltre è stato potenziato sia con le specifiche ES6 che con altre rendendo ,quindi,necessaria la ‘transpilazione’ in ES5 supportato da tutti i browser attuali.
Il linguaggio TypeScript e la tipologia dei dati
Una delle novità più importanti introdotte nel linguaggio TypeScript è sicuramente la possibilità , o meglio l’obbligo, di assegnare il tipo per ogni variabile dichiarata (da questo deriva il nome TypeScript).
Questa caratteristica è presente già in linguaggi “fortemente tipizzati” come in Java ma non in javascript dove è lo stesso linguaggio che decide il tipo da assegnare alla variabile in base al dato ricevuto.
E’ chiaro che ciò può dare origine a degli errori che, in programmi lunghi e complessi, sono difficili da intercettare.
Vediamo ora la differenza di scrittura tra una funzione scritta in Javascript ed una scritta in TypeScript:
-
FUNZIONE SCRITTA IN TYPESCRIPT
function add(a: number, b: number) {
return a + b;
}
add(6, 5); // 11
// qui sotto viene segnalato un errore prima ancora dell'esecuzione del codice
add(6, '5'); Di sicuro la seconda chiamata alla funzione add() mi darà errore in quanto il secondo parametro , essendo chiuso fra apici, sarà una stringa e non un numero come dichiarato nell’argomento b. Cosa che non avverrebbe in caso di funzione scritta in javascript:
-
FUNZIONE SCRITTA IN JAVASCRIPT
function add(a, b) {
return a + b;
}
add(6, 5); // 11
add(6, '5'); // '65' comportamento non volutoCome potete notare , nel caso della funzione scritta in TypeScript, dove esplicito la tipologia dei dati, ho maggiore controllo in caso di errori.
Lo stesso avviene nell’ipotesi che si debbano ricevere dei dati provenienti da un’API remota dove posso definire il modello dei dati e specificare per ognuno di questi il tipo. Inoltre ho la possibilità di aggiungere un tipo alternativo per alcuni di essi:
interface Books {
id: number;
nome: string;
iban: string;
data: string | Date; // due tipi di dati
price: number
}Come potete notare il dato ‘data’ può essere di tipo string o date.
Come avviene in altri linguaggi di programmazione , un’altra caratteristica di TypeScript è quella di poter definire le classi così da poter compilare progetti più stabili e facili da gestire.
E’ stata introdotta ,inoltre, la possibilità di utilizzare i moduli, in tal modo è più semplice includere librerie di terze parti all’interno di un progetto.
Transpilare TypeScript
TypeScript è un linguaggio oramai abbastanza diffuso quindi esistono vari plugin per gli editor più importanti ed è integrato, inoltre, nei vari IDE.
Con il termine transpilare si intende la traduzione di un programma in un altro, in questo caso si traduce il programma scritto in typescript in javascript compatibile con tutti i browser attuali.
Il transpilatore di typescript può essere utilizzato come plugin all’interno di un IDE come ad esempio Visual Studio o si può installare come pacchetto di sistema tramite npm.
Installare TypeScript in Visual Studio
Anche se le ultime versioni di Visual Studio supportano già TypeScript nativamente, si consiglia di installare un plugin aggiornato essendo la prima un po datata.
Sicuramente il plugin più noto è TSLint, vediamo come installarlo su visual Studio:
se non lo avete già fatto scaricatevi Visual Studio ed installatelo, quindi apritelo, fate click sul pulsante “Estensioni” come indicato in figura e digitate nella barra di ricerca tslint
quindi fate click su installa ed il gioco è fatto.
Installare TypeScript da riga di comando
Molti utenti preferiscono la riga di comando , o piuttosto vogliono solamente un transpilatore senza installare alcun IDE.
TypeScript viene distribuito come modulo npm, quindi è necessario installare node.js , npm e dare l’istruzione per l’installazione del modulo globale TypeScript, aprite il terminale e digitate:
npm install -g typescript
dove -g sta per global.
Se volete potete anche provare un PlayGround con cui sperimentare il codice al seguente indirizzo.
Nel prossimo articolo vedremo le variabili in Typescript.
Ciauz.