Crea il tuo primo “programma” in Typescript: Hello world!

Ora che abbiamo il compilatore, non ci resta che provarlo creando il nostro primo “programma” TypeScript, e per farlo realizzeremo, ovviamente, un Hello world.

Creiamo un file main.ts con il seguente codice: 

console.log("Hello world!");

Ehi, ma questo è normalissimo linguaggio JavaScript! 

Esatto: siccome non abbiamo dichiarato variabili né definito funzioni o classi, non c’è nessun bisogno di usare dichiarazioni o annotazioni di tipo, motivo per cui qui il codice TypeScript coincide al 100% con il suo compilato. 

Poiché questo file .ts contiene codice JavaScript, volendo, possiamo lanciarlo in Node, nonostante la sua estensione sia .ts anziché .js: 

node main.ts # -> Hello world!

Il comando gira senza problemi, ma non abbiamo fatto molta strada. Vediamo, dunque, di far girare il compilatore almeno una volta: 

tsc main.ts

Ora, accanto al file main.ts è apparso un nuovo file main.js, dal contenuto identico. Anche questo può essere lanciato in Node, oppure essere linkato come script in una pagina HTML. Per semplicità, in questa guida ci limiteremo a lanciare i nostri script in Node. 

Iniziamo a vedere un assaggio di come possiamo usare TypeScript per annotare i tipi coinvolti; sostituiamo il precedente contenuto di main.ts con il seguente codice: 

function log(message: string): void { 
 console.log(message); 
}

var greeting: string = "Hello world!"; 
log(greeting);

Vediamo rapidamente cosa dice il nostro codice TypeScript: 

• anzitutto, definisce una funzione log che accetta un parametro message di tipo string e restituisce void (cioè assolutamente niente); 
• poi, dichiara una variabile greeting di tipo string e vi assegna immediatamente il valore “Hello world!”; 
• infine, chiama la funzione log passandole greeting come argomento. 

Rilanciando il compilatore, noteremo che ora il compilato ha questo aspetto: 

function log(message) { 
 console.log(message); 
} 
var greeting = "Hello world!"; 
log(greeting);

In altre parole, tutte le annotazioni di tipo (e le righe vuote) sono semplicemente scomparse, lasciando il codice JavaScript funzionante. 

Quindi, dov’è l’utilità? 

Te lo spieghiamo subito. Se ora provassimo a chiamare la funzione log passando un argomento numerico (ad esempio: log(1)), noteremmo sia in Visual Studio Code, sia lanciando tsc, che ci viene segnalato un errore: 

Argument of type 'number' is not assignable to parameter of type 'string'.

Il compilatore ci sta dicendo che l’argomento 1 non è compatibile con il tipo string del parametro message richiesto da log. Questo perché nella definizione di log abbiamo vincolato il tipo del suo parametro a string. 

E se volessimo fare in modo che log accetti parametri di più di un tipo? 

Più avanti tutto sarà rivelato. 

Piccolo distinguo non fondamentale, ma è una sfumatura interessante: il parametro è la variabile che la funzione definisce nella propria firma, mentre l’argomento è il valore che le viene passato al momento della chiamata. 

Nell’esempio di sopra, il contenuto di greeting è l’argomento, mentre message è il parametro. 

Nell’esempio abbiamo usato var al posto di const intenzionalmente. Se avessimo dichiarato la variabile usando const, TypeScript l’avrebbe tradotta comunque in var; questo è dovuto al fatto che in qualità di transpiler, tsc deve stabilire una versione di JavaScript a cui compilare, e la versione di default è es3 (ECMAScript 3), che è anche la più vecchia disponibile. Se volessimo compilare all’ultima versione di JavaScript, potremmo sfruttare il parametro –target con versione esnext:

tsc --target esnext main.ts

Rivelazione: il vero nome di JavaScript è ECMAScript, o meglio: JavaScript è l’implementazione più famosa di ECMAScript, che per la precisione è la specifica tecnica di JavaScript e altri linguaggi di scripting analoghi come JScript e ActionScript.