Introduzione a TypeScript per lo sviluppatore C#
Nei primi anni del web faceva la sua comparsa JavaScript (inizialmente denominato LiveScript), linguaggio che doveva consentire agli sviluppatori di applicazioni web di interagire con i vari elementi delle pagine. Nel corso degli anni JavaScript ha conosciuto una evoluzione straordinaria, incentivato dal sempre crescente supporto dei browser e dal costante incremento delle prestazioni degli interpreti, dal rilascio di svariate librerie che hanno notevolmente semplificato la vita degli sviluppatori (un esempio, jQuery), diventando così parte integrante e fondamentale nello sviluppo di RIA (Rich Internet Application) e giungendo ad essere alla base anche dello sviluppo di applicazioni per Windows 8.
Eppure, nonostante l'importanza acquisita, a causa di alcune mancanze insite nel linguaggio stesso, JavaScript continua ad essere un linguaggio ostico sotto diversi punti di vista. Trattandosi di un linguaggio interpretato e non tipizzato non esiste una fase di compilazione che evidenzi eventuali errori del programmatore. Inoltre manca di un vero supporto alla programmazione ad oggetti: non esistono infatti costrutti come le classi e le interfacce. Spesso inoltre, specie in progetti di grandi dimensioni, i sorgenti tendono a crescere in modo caotico e poco leggibile.
Nel tentativo di colmare le mancanze del linguaggio e di facilitare ed incrementare la produttività degli sviluppatori JavaScript, nel panorama dei linguaggi sviluppati e promossi da Microsoft negli ultimi anni, da C# al più recente F# tanto per citarne alcuni, si è aggiunto da qualche mese TypeScript, rilasciato in versione 0.8.1.1 lo scorso 4 dicembre: il papà, Anders Hejlsberg, già autore del Turbo Pascal nell'ormai lontano 1980, e più recentemente architetto capo del team di sviluppo di C#, ne ha annunciato la nascita in un video introduttivo (in inglese) qualche settimana prima.
Cos'è TypeScript?
Uno dei lanci ripresi dal portale ufficiale di questo nuovo linguaggio, "Starts from JavaScript, Ends with JavaScript" (tutto comincia e finisce con JavaScript), esprime bene il concetto alla base di TypeScript.
Questo è basato infatti su un superinsieme di ECMAScript 5 (ECMAScript è il nome della versione di JavaScript standardizzata dall'European Computer Machine Association) ed inoltre implementa alcuni dei costrutti proposti per ECMAScript 6. In altre parole, qualunque sorgente JavaScript esistente è già un sorgente TypeScript. Questa è la principale caratteristica che lo distingue da altri linguaggi paragonabili, come CoffeeScript o Dart.
Nella documentazione viene definito così: "TypeScript is a syntactic sugar for JavaScript.". TypeScript introduce in JavaScript costrutti come le classi, le interfacce ed i moduli, oltre che la tipizzazione statica delle variabili: per molti programmatori lo zucchero sintattico citato dalla documentazione. I sorgenti vengono poi processati dal compilatore che si occupa di effettuare il controllo dei tipi e di trasformare il sorgente in codice JavaScript puro, e per questo utilizzabile ovunque. Inoltre nelle intenzioni del team di sviluppo di TypeScript vi è l'obiettivo di ottenere un codice finale pulito, leggibile e manutenibile: per questo motivo il compilatore TypeScript non effettua trasformazioni sui nomi delle variabili o dei metodi, né applica una minimizzazione dell'output.
L'intero progetto è open source (rilasciato con licenza Apache License) ed esistono plugin per diversi ambienti, quali SublimeText, VI ed Emacs, ma è in Visual Studio 2012 che TypeScript trova il suo habitat naturale, come avremo modo di vedere in seguito, grazie all'apposito plugin: oltre al compilatore viene installato tutto il necessario per abilitare il supporto al nuovo linguaggio all'interno dell'ambiente, ed il nuovo modello di progetto HTML Application with TypeScript.
Diamo allora un'occhiata alle caratteristiche salienti del nuovo linguaggio.
Tipizzazione statica e controllo dei tipi
TypeScript aggiunge alcuni tipi statici al JavaScript. Tutti sono sottotipi del tipo base any: questo può rappresentare qualunque tipo JavaScript senza alcuna limitazione. Gli altri tipi sono invece classificati come tipi primitivi e tipi oggetto. In particolare, i tipi primitivi sono:
- number: numeri in virgola mobile a precisione doppia (64bit);
- boolean: valori logici booleani (true/false);
- string: sequenze di caratteri Unicode UTF-16;
- null: l'equivalente dello stesso tipo definito in JavaScript;
- undefined: l'equivalente dello stesso tipo definito in JavaScript.
mentre i tipi oggetto sono class, module e interface.
Dichiarare una variabile, ad esempio di tipo number, richiede una sintassi simile alla seguente:
var x:number; var x = 1; // Inferenza: equivalente a var x:number = 1;
La parola chiave var indica la dichiarazione di una variabile, seguita dal nome della variabile e dal suo tipo, separati dai due punti. Quando il tipo della variabile non viene specificato, il compilatore tenta di inferire il tipo dall'assegnazione che viene fatta.
La tipizzazione dei parametri dei metodi è analoga alla dichiarazione delle variabili: il nome del parametro è seguito dal tipo, separato dai due punti:
function showAlert(message: string):void {
alert(message);
}Nell'esempio appena visto possiamo notare l'utilizzo del tipo speciale void, utilizzato solo per indicare l'assenza di valori, come, appunto, nelle funzioni senza valori di ritorno. Mutuata dal fratello maggiore C# la possibilità di specificare parametri di default e parametri opzionali, utilizzando la sintassi dell'esempio che segue:
// Funzione showAlert
// parametro message, "Hello" valore di default
// parametro description: opzionale
function showAlert(message: string = "Hello", description?: string):void {
if (description != null) {
alert(message + ": " + description);
} else {
alert(message);
}
}Il compilatore si occupa di controllare i tipi e le assegnazioni, segnalando al programmatore eventuali errori.
Attenzione: Questo articolo contiene un allegato.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare una libreria CSS universale: i bottoni
Le novità di Angular: i miglioramenti alla CLI
Change tracking e composition in Entity Framework
Gestire domini wildcard in Azure Container Apps
Ordinare randomicamente una lista in C#
Recuperare l'ultima versione di una release di GitHub
Gestione dell'annidamento delle regole dei layer in CSS
Utilizzare i primary constructor di C# per inizializzare le proprietà
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Gestione degli stili CSS con le regole @layer
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database