Introduzione a TypeScript

Javascript viene considerato da tantissimi sviluppatori un linguaggio completo, veloce da apprendere e altamente produttivo tanto che i suoi più accaniti appassionati hanno dimostrato spesso evidente avversione nei confronti delle alternative più classiche come Java, C++ e C# che, sebbene ricche di funzionalità e orientate agli oggetti, hanno dimostrato spesso una prolissità eccessiva. Inoltre, la nascita di una piattaforma come Node.js e di tutto ciò che ne è derivato – tra cui l’impiego di tecnologie web in campo mobile – hanno spinto Javascript verso record storici di utilizzo.

Tuttavia, l’essenzialità di questo linguaggio ha fatto sentire la mancanza, nel tempo, di alcuni meccanismi sintattici – uno su tutti, il controllo dei tipi di dato – e ciò ha portato via via alla definizione del linguaggio di cui iniziamo a parlare oggi, Typescript, figlio dei laboratori di ricerca Microsoft.

Avvio a TypeScript

Iniziamo innanzitutto a metterlo a disposizione della nostra piattaforma e per farlo abbiamo bisogno del package manager npm di cui si è già parlato a proposito di Node.js:

$ npm install -g typescript

La prima nozione da apprendere è che, a differenza di Javascript, ci troviamo di fronte ad un linguaggio compilato, non interpretato. L’attivazione del compilatore avviene tramite il comando tsc che ora, dopo l’invocazione precedente, avremo a disposizione nel nostro sistema. La compilazione genererà dei file Javascript che useremo nelle pagine web che stiamo producendo. Si ricordi comunque che qualsiasi codice Javascript è anche codice TypeScript valido e questo permette un passaggio graduale al nuovo formalismo.

Scriviamo il nostro primo codice TypeScript:

var messaggio: string="Ciao mondo!";
alert(messaggio);

Si tratta di un normale codice Javascript (che avremo salvato nel file prova.ts) che non si occupa altro se non della pubblicazione di un semplice messaggio di benvenuto in una finestra di alert. Unica differenza rispetto a ciò che siamo abituati a vedere è quella notazione “:string” che segue il nome della variabile. Quello è il tipo di dato che assegniamo al valore ed è uno dei tratti più distintivi di TypeScript.

Compiliamo il file con il comando:

$ tsc prova.ts

ed otteniamo nella medesima cartella il file prova.js dal contenuto identico al precedente ad esclusione della specifica del tipo di dato string per la variabile messaggio:

var messaggio = "Ciao mondo!";
alert(messaggio);

Per sperimentarlo, sarà sufficiente creare un normale schema HTML in cui attivare lo script:

<html>
<head>
<script src="prova.js"></script>
</head>
<body>

</body>
</html>

Ogni volta che viene modificato, lo script TypeScript deve essere ricompilato o in alternativa si può scegliere un meccanismo automatico tramite l’opzione –watch

$ tsc prova.ts --watch

il quale lascerà il processo in esecuzione e, ogni volta che percepirà modifiche al codice, procederà alla ricompilazione avvisandoci con log di questo tipo sulla console:

14:18:51 - Compilation complete. Watching for file changes.
14:19:03 - File change detected. Starting incremental compilation...
14:19:04 - Compilation complete. Watching for file changes.

La compilazione del codice TypeScript previene anche da errori che, con un linguaggio interpretato, noteremmo solo in produzione o, peggio ancora, produrrebbero dei comportamenti inaspettati. Poniamo il caso di aggiungere una riga al codice con un’operazione insensata per una stringa:

var messaggio: string="Ciao mondo bellissimo!";
messaggio*=2;
alert(messaggio);

la compilazione con tsc produce il seguente errore

prova.ts(2,1): error TS2362: The left-hand 
side of an arithmetic operation must be of type 'any', 
'number' or an enum type.

mentre Javascript accetterebbe il tutto e produrrebbe in risposta un valore NaN (Not a Number) all’interno dell’alert.

Tipi di dato e interfacce

La tipizzazione dei dati in TypeScript è opzionale ma se ne consiglia fortemente l’uso. I tipi adottabili sono i seguenti:

number per tutti i numeri, senza distinzioni;
string, come immaginabile, per le stringhe quindi ogni tipo di sequenza alfanumerica;
boolean per conservare valori logici corrispondenti al concetto di true o false, rispettivamente, vero o falso;
tuple che consistono in array in cui gli elementi avranno tipi di dato differenti ma prestabiliti. Ad esempio, la seguente tupla:
```
var tupla:[string, boolean, number]=["messaggio di testo", true, 23];
```
vedrà, al suo interno, la componente tupla[0] che accetterà solo stringhe, tupla[1] che vorrà solo un valore booleano ed infine tupla[2] in grado di immagazzinare solo numeri. Inoltre, le tuple non hanno dimensione fissa ma si possono aggiungere ulteriori elementi dopo quelli dichiarati;
le enumerazioni permettono, come in altri linguaggi, di definire tipi di dato il cui dominio di esistenza è limitato a specifici valori. Ad esempio:
```
enum Semaforo {Rosso, Verde, Giallo};
```
permetterà di usare i tre nuovi valori Semaforo.Rosso, Semaforo.Verde e Semaforo.Giallo;
any accetta qualsiasi valore all’interno della variabile: attua in pratica quello che è il comportamento tipico di Javascript;
void, in ultimo, viene per lo più utilizzato come tipo di ritorno per le funzioni ad indicare la loro natura di “procedure”, non offrendo quindi alcun risultato ma svolgendo solo operazioni.

Di questi tipi di dato, i primi tre coincidono esattamente con quelli offerti da Javascript classico, gli altri sono stati appositamente introdotti in TypeScript.

Inoltre, si può definire dei nuovi tipi di dato aggregati indicando quali componenti devono farne parte. Se, ad esempio, volessimo definire un tipo di oggetto in grado di rappresentare una persona con tanto di nome, cognome, età e possesso di un’automobile potremmo utilizzare la seguente interfaccia:

interface Persona
{
	nome: string;
	cognome: string;
	eta: number;
	automunito: boolean
}

per definire oggetti di questo tipo:

var tizio:Persona ={
	nome: "Gigi",
	cognome: "Rossi",
	eta: 45,
	automunito: true
}

o da passare come parametri formali a funzioni del genere:

function salvaPersona(p: Persona)
{
     // codice da eseguire
}

Conclusioni

TypeScript è nato quindi come evoluzione del linguaggio Javascript in modo da rispondere a maggiori esigenze di sicurezza senza rinunciare ai vantaggi del suo progenitore. Dimostrazione del suo valore è anche l’utilizzo che ne è stato fatto nei più recenti framework Javascript: uno su tutti Angular2. Per chi volesse iniziare a sperimentare il linguaggio senza dover necessariamente installarlo sulla propria macchina, si può ricorrere a Playground, la console messa a disposizione sul sito ufficiale: presenta due pannelli in cui potremo scrivere il codice TypeScript e vederlo compilato.

Questo è solo l’inizio di quanto vi racconteremo su questa nuova frontiera del web: continuate a seguirci!