{"id":12310,"date":"2017-03-17T14:38:30","date_gmt":"2017-03-17T13:38:30","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12310"},"modified":"2017-03-17T14:38:30","modified_gmt":"2017-03-17T13:38:30","slug":"introduzione-a-typescript","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/introduzione-a-typescript\/","title":{"rendered":"Introduzione a TypeScript"},"content":{"rendered":"

Javascript viene considerato da tantissimi sviluppatori\u00a0un linguaggio completo, veloce da apprendere e altamente produttivo tanto che i suoi pi\u00f9 accaniti appassionati hanno dimostrato spesso evidente avversione nei confronti delle alternative\u00a0pi\u00f9 classiche come Java, C++ e C# che, sebbene ricche di funzionalit\u00e0 e orientate agli oggetti, hanno dimostrato spesso una prolissit\u00e0 eccessiva. Inoltre, la nascita di una piattaforma come Node.js<\/a> \u00a0e di tutto ci\u00f2 che ne \u00e8 derivato – tra cui l’impiego di tecnologie web in campo\u00a0mobile – hanno\u00a0spinto Javascript verso record storici di utilizzo.<\/p>\n

Tuttavia, l’essenzialit\u00e0 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\u00f2 ha portato via via\u00a0alla definizione del linguaggio di cui iniziamo a parlare oggi, Typescript<\/a>, figlio dei laboratori di ricerca Microsoft.<\/p>\n

Avvio a TypeScript<\/h2>\n

Iniziamo innanzitutto a metterlo a disposizione della nostra piattaforma e per farlo abbiamo bisogno del package manager npm\u00a0<\/em>di cui si \u00e8 gi\u00e0 parlato a proposito di Node.js:<\/p>\n

$ npm install -g typescript<\/pre>\n
La prima nozione da apprendere \u00e8 che, a differenza di Javascript, ci troviamo di fronte ad un linguaggio compilato<\/strong>, non interpretato. L’attivazione del compilatore avviene tramite il comando tsc<\/em> che ora, dopo l’invocazione precedente, avremo a disposizione nel nostro sistema. La compilazione generer\u00e0 dei file Javascript che useremo nelle pagine web che stiamo producendo. Si ricordi comunque che qualsiasi codice Javascript \u00a0\u00e8 anche codice TypeScript valido<\/strong> e questo permette un passaggio graduale al nuovo formalismo.<\/p>\n
Scriviamo il nostro primo codice TypeScript:<\/p>\n
var messaggio: string=\"Ciao mondo!\";\r\nalert(messaggio);<\/pre>\n
Si tratta di un normale codice Javascript (che avremo salvato nel file prova.ts<\/strong>) 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\u00f2 che siamo abituati a vedere \u00e8 quella notazione “:string<\/em>” che segue il nome della variabile. Quello \u00e8 il tipo di dato che assegniamo al valore ed \u00e8 uno dei tratti pi\u00f9 distintivi di TypeScript.<\/p>\n
Compiliamo<\/strong> il file con il comando:<\/p>\n
$ tsc prova.ts<\/pre>\n
ed otteniamo nella medesima cartella il file prova.js<\/strong> dal contenuto identico al precedente ad esclusione della specifica del tipo di dato string<\/em> per la variabile messaggio:<\/p>\n
var messaggio = \"Ciao mondo!\";\r\nalert(messaggio);<\/pre>\n
Per sperimentarlo, sar\u00e0 sufficiente creare un normale schema HTML in cui attivare lo script:<\/p>\n
<html>\r\n<head>\r\n<script src=\"prova.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Ogni volta che viene modificato, lo script TypeScript deve essere ricompilato o in alternativa si pu\u00f2 scegliere un meccanismo automatico tramite l’opzione –watch<\/em><\/p>\n
$ tsc prova.ts --watch<\/pre>\n
il quale lascer\u00e0 il processo in esecuzione e, ogni volta che percepir\u00e0 modifiche al codice, proceder\u00e0 alla ricompilazione avvisandoci con log di questo tipo sulla console:<\/p>\n
14:18:51 - Compilation complete. Watching for file changes.\r\n14:19:03 - File change detected. Starting incremental compilation...\r\n14:19:04 - Compilation complete. Watching for file changes.<\/pre>\n
La compilazione del codice TypeScript previene anche da\u00a0errori 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\u00a0per una stringa:<\/p>\n
var messaggio: string=\"Ciao mondo bellissimo!\";\r\nmessaggio*=2;\r\nalert(messaggio);<\/pre>\n
la compilazione con tsc\u00a0<\/em>produce\u00a0il seguente errore<\/p>\n
prova.ts(2,1): error TS2362: The left-hand \r\nside of an arithmetic operation must be of type 'any', \r\n'number' or an enum type.<\/pre>\n
mentre Javascript accetterebbe il tutto e produrrebbe in risposta\u00a0un valore NaN (Not a Number) all’interno dell’alert.<\/p>\n
Tipi di dato e interfacce<\/h2>\n
La tipizzazione dei dati in TypeScript \u00e8 opzionale<\/strong> ma se ne consiglia fortemente l’uso. I tipi adottabili sono i seguenti:<\/p>\n