L'importanza di JavaScript e la sua centralità nello sviluppo delle applicazioni è nota. Suffragata anche dall'infinita disponibilità di librerie e framework di primo piano (come JQuery o AngularJS, per citarne un paio) e dalla massima attenzione riposta dai produttori dei maggiori browser nel rendere l'esecuzione del codice sempre più ottimizzata, fluida e veloce.
Tuttavia, sviluppare applicazioni di complessità medio/alta in JavaScript non è un compito semplicissimo, ed è qui che entra in gioco Microsoft con TypeScript.
Cos'è TypeScript
Di cosa si tratta? È forse un clone di JavaScript, come il famigerato JScript? Oppure è un nuovo linguaggio costruito da zero, simile a JavaScript? Nulla di tutto questo.
TypeScript è un "superset" di JavaScript, cioè un linguaggio che estende JavaScript con elementi e caratteristiche e che produce in output semplice codice JavaScript come risultato della sua compilazione.
Con TypeScript, JavaScript viene equipaggiato con tipi, classi, interfacce e moduli, che permettono lo sviluppo di applicazioni facilmente scalabili. Queste caratteristiche - tipiche dei linguaggi di programmazione orientati agli oggetti e staticamente tipizzati - semplificano inoltre il lavoro dei tool di sviluppo che forniscono così un migliore supporto nella stesura e manutenzione del codice (ad esempio, operazioni di refactoring avanzate).
Lo stesso compilatore di TypeScript è scritto in linguaggio TypeScript, ed è open source.
Il riferimento a JavaScript come base di partenza e arrivo consente di utilizzare in TypeScript tutto il codice JavaScript esistente, inclusa la pletora di librerie attualmente disponibili per questo linguaggio, mentre la generazione di codice JavaScript in ultima istanza ne permette tranquillamente l'esecuzione su qualsiasi browser, sistema o dispositivo.
Iniziare a lavorare con TypeScript
TypeScript è attualmente disponibile come "preview" e ha un sito ufficiale in cui è possibile apprendere i rudimenti del linguaggio e acquisire familiarità tramite esempi di codice esplicativi (nella sezione "Learn"); il codice di esempio si può provare direttamente online attraverso il cosiddetto Playground (nella sezione "Play"), una pagina che carica l'engine di TypeScript e consente di ottenere in tempo reale la traduzione del codice nel linguaggio JavaScript generata dal compilatore con la possibilità di eseguirlo, fornendo un'anteprima delle capacità del tool e del lavoro che svolge.
È possibile lavorare con TypeScript "offline", scaricando il plugin per Visual Studio 2012 dalla sezione "Get It" del sito. Il pacchetto include sia nuovi modelli per la creazione di progetti di applicazioni basate su TypeScript, sia il supporto necessario all'ambiente di sviluppo Microsoft per la gestione dei file ".ts" (è l'estensione associata agli script TypeScript), l'integrazione di IntelliSense durante l'editing del codice sorgente, la possibilità di fare debugging, l'anteprima del codice JavaScript generato in output dal compilatore (analogamente a quanto avviene online nel Playground del sito ufficiale), oltre a una sezione dedicata di configurazione per TypeScript nella finestra di dialogo delle opzioni di Visual Studio.
Dalla stessa pagina si può scaricare anche un package per Node.js, il codice sorgente del compilatore (ospitato sul sito CodePlex) e i primi plugin per altri editor di terze parti (come Sublime Text), ed è ipotizzabile che la sezione si arricchisca presto di altri pacchetti, ufficiali e non, per aggiungere il supporto a TypeScript anche in altri tool e ambienti di programmazione, grazie alla natura "Open" del prodotto che favorisce senz'altro questo aspetto.
Affrontare in dettaglio tutte le caratteristiche di TypeScript richiederebbe un più ampio spazio: in questo articolo introduttivo ci limiteremo a vedere solo alcune tra le principali proprietà del linguaggio TypeScript e del compilatore, con l'obiettivo di comprendere quali sono i possibili vantaggi nel suo utilizzo.
Laddove sono presenti esempi di codice, questi sono testabili copiandoli direttamente nel Playground, oppure in un progetto di applicazione TypeScript creata in Visual Studio 2012 (dopo aver installato l'apposito plugin).
Una delle caratteristiche fondamentali di TypeScript risiede senz'altro nell'aggiunta a JavaScript di quelle potenzialità dei linguaggi altamente tipizzati (come C#, Java o Delphi) per donare una certa "rigidità" al modello a oggetti su cui si basa l'applicazione che si sta scrivendo, paradigma generalmente ottenuto attraverso costrutti complessi in JavaScript, progettato per essere estremamente dinamico.
Con TypeScript è possibile utilizzare una serie di tipi di dati standard, quali ad esempio string, oppure number o bool, per definire variabili e parametri delle funzioni; questo consente di definire in modo esplicito i tipi di dato accettati in un determinato punto del codice, oltre a ottenere segnalazioni tempestive degli errori logici nelle operazioni di assegnazioni e di confronto.
Si possono inoltre dichiarare classi, interfacce e moduli, con pieno supporto all'ereditarietà, e sfruttare addirittura feature avanzate come i Generics.
Nello stralcio di codice che segue è riportato un esempio di implementazione di una classe:
// Classe
class MessageBox {
// Campi
text: string;
// Costruttore
constructor(text: string) {
this.text = text;
};
// Metodi
alert() {
alert(this.text);
};
confirm() {
return confirm(this.text);
};
}
// Programma principale
var msgBox = new MessageBox("Hello world!");
if (msgBox.confirm())
msgBox.alert();Questo è invece il codice JavaScript risultante, ottenuto automaticamente dalla compilazione del listato TypeScript, che verrà effettivamente eseguito dal browser:
var MessageBox = (function () {
function MessageBox(text) {
this.text = text;
}
MessageBox.prototype.alert = function () {
alert(this.text);
};
MessageBox.prototype.confirm = function () {
return confirm(this.text);
};
return MessageBox;
})();
var msgBox = new MessageBox("Hello world!");
if(msgBox.confirm()) {
msgBox.alert();
}Da questo esempio è facilmente constatabile nella pratica quanto sia più leggibile il codice TypeScript rispetto all'output JavaScript generato. Inoltre, come predetto, TypeScript utilizza tipi per le variabili e il servizio di compilazione ne garantisce la compatibilità segnalando eventuali errori: ad esempio, se il tipo del campo "text" venisse modificato da string a bool, sarebbero subito evidenziate tutte le righe che passano tale variabile alle funzioni che si aspettano una stringa e non un valore booleano.
TypeScript supporta il paradigma della programmazione a oggetti (OOP), ivi compresa la possibilità di creare una gerarchia di classi costruendo una classe base e creando classi che derivano da essa, come si può vedere in questo esempio:
// Figura
class Shape {
height: number;
width: number;
constructor(height: number, width: number) {
this.height = height;
this.width = width;
};
getArea() {
return 0;
}
}
// Rettangolo
class Rectangle extends Shape {
getArea() {
return this.height * this.width;
}
}
// Triangolo
class Triangle extends Shape {
getArea() {
return (this.height * this.width / 2);
}
}
// Calcolo area rettangolo di esempio
var r = new Rectangle(120, 80);
alert(r.getArea().toString());
// Calcolo area triangolo di esempio
var t = new Triangle(120, 80);
alert(t.getArea().toString());Qui si può notare come l'uso di alert() per visualizzare il valore restituito dal metodo getArea(), di tipo numerico, debba essere convertito in stringa tramite il metodo toString() per ottenere il valore appartenente al tipo compatibile richiesto dalla funzione.
Conclusioni
Le peculiarità di TypeScript illustrate in questo articolo, sebbene non esaustive, dovrebbero essere sufficienti a dare un'idea precisa delle finalità per cui Microsoft ha creato questo linguaggio: colmare i "gap" del linguaggio JavaScript per renderlo più adatto allo sviluppo di applicazioni complesse, più robusto e più rigido, favorendone il supporto da parte dei tool di sviluppo (con una preferenza verso gli utenti di Visual Studio) per semplificare e soprattutto accelerare il lavoro di codifica, consentendo di "alzare il livello" e rendendo giustizia alla centralità del ruolo che JavaScript sta assumendo nelle applicazioni cross-platform e cross-device moderne e del supporto universale di cui gode.
Microsoft non è l'unica ad aver proposto soluzioni di questo tipo: citiamo ad esempio Dart, un framework di Google affine a TypeScript nello scopo ma differente nella sua struttura, e CoffeeScript.
Alcune delle novità introdotte in TypeScript fanno anche parte delle promesse incluse anche nelle future versioni di ECMAScript. In questo frangente, l'intenzione di Microsoft è quella di adeguare la sintassi affinché sia il più possibile aderente a quella dello standard, favorendo una elevata compatibilità tra i linguaggi e introducendo un ulteriore vantaggio nell'uso di TypeScript: consentire agli script di funzionare sia nei browser più recenti, grazie alle affinità con l'ultima versione di ECMAScript, sia nei browser datati, grazie alla traduzione ottimizzata in JavaScript operata dal compilatore.
