Utilizzare TypeScript per creare applicazioni con Angular 2
Siamo in un periodo in cui la ECMA, l'associazione impegnata anche nella standardizzazione del JavaScript (o, per meglio dire, EcmaScript), introduce nuove funzionalità nel linguaggio a un buon ritmo ma, come è tipico, persiste una percentuale di browser desktop e mobile che tarderanno ad aggiungerne il supporto. La seguente tabella mostra sinteticamente il supporto al nuovo EcmaScript6.
La tabella è visibile per intero su https://kangax.github.io/compat-table/es6/.
Il supporto è ovviamente carente con le tecnologie più obsolete ma gli sviluppatori, per motivi di produttività e leggibilità del codice, sono comunque ansiosi di usare le nuove funzionalità del linguaggio.
TypeScript è stato sviluppato da Microsoft per permetterci di usare, già da oggi, tutte queste nuove funzionalità nel pieno rispetto di quegli utenti che, per scelta o necessità, usano browser meno recenti. Grazie al suo compilatore tsc, il codice TypeScript verrà transcodificato in codice EcmaScript5 supportato dalla stragrande maggioranza dei client.
Scrivendo il seguente blocco di codice TypeScript...
class Person {
constructor(private name: string) {
}
welcome() {
return "Welcome to TypeScript, ${this.name}!";
}
}
var Person = (function () {
function Person(name) {
this.name = name;
}
Person.prototype.welcome = function () {
return "Welcome to TypeScript, " + this.name + "!";
};
return Person;
}());
Quel che si nota subito è che, non solo il codice TypeScript è più succinto, ma riutilizza quei costrutti che siamo abituati ad usare server-side, in linguaggi come C#. Per questo, offre meno attrito all'apprendimento da parte degli sviluppatori back-end che vogliano iniziare a cimentarsi nella realizzazione di applicazioni client complesse.
TypeScript è dunque un superset di JavaScript che aggiunge le tipiche funzionalità dei linguaggi staticamente tipizzati e lo fa allo scopo di segnalarci, già all'atto della compilazione, gli eventuali errori di digitazione o gli usi errati delle API JavaScript.
TypeScript ed Angular 2
Con la partnership di Microsoft, il team di Angular ha scelto di riscrivere Angular 2 in TypeScript. Si tratta di un framework future-proof, che mira a correggere alcuni dei problemi della versione precedente (non ultima: la ripida curva di apprendimento) e che noi, come sviluppatori, possiamo programmare sia in TypeScript che in EcmaScript6 o Dart, come anche la documentazione evidenzia (https://angular.io/docs/js/latest/).
L'utilizzo di TypeScript è comunque fortemente consigliato e lo si capisce anche dalla cura e dalla completezza della sua documentazione.
Non tutte le funzionalità di EcmaScript6 sono direttamente "traducibili" dal compilatore in costrutti compatibili con EcmaScript5 e perciò, tra le dipendenze di Angular 2, troveremo il file es6-shim.min.js che serve a emulare tali funzionalità in determinati browser. Grazie ad esso, Angular 2 è anche compatibile con IE9, Android 4.1 e iOS 7.1.
<!-- Polyfill(s) for older browsers --> <script src="node_modules/es6-shim/es6-shim.min.js"></script>
TypeScript, transcodifica, shim... perché tutta questa complicazione?
Angular, a causa di alcune scelte di progettazione, è stato a volte giudicato come un framework inutilmente complicato. Sebbene in Angular 2 molti concetti siano stati unificati e semplificati, usarlo ci richiederà comunque di affrontare un certo carico cognitivo. In realtà, non c'è nulla di difficile in questo: si tratta del tipico investimento che ci porterà, ben presto, a maturare competenze nello sviluppo di applicazioni web moderne con un framework che aumenterà in popolarità e diffusione.
Sviluppare un'applicazione "moderna" non significa accettare ciecamente le novità tecnologiche che appassionano la community di sviluppatori. Vuol dire invece essere consapevoli che le aspettative dei nostri clienti crescono, perché il web apre loro nuove opportunità di mercato. Un'applicazione web "moderna" non solo contribuisce ad adempiere a quelle aspettative ma usa degli strumenti che rendono il nostro lavoro "sostenibile":
- Sostenibile perché usando un framework come Angular 2 riusciremo a manutenere applicazioni complesse più facilmente e a risolvere bug in meno tempo;
- Sostenibile perché, grazie ad un design modulare, ci consente di accogliere favorevolmente le modifiche richieste dal cliente, ed eventualmente ad introdurre altre persone nel team senza che, prima di iniziare, debbano necessariamente possedere una visione completa del progetto;
- Sostenibile perché siamo incentivati a tenere ordinato il nostro codice e a testarlo, il che produrrà un'applicazione di qualità superiore.
Ottimi ausili se scegliamo di sviluppare in TypeScript
Uno dei punti a favore dello sviluppo con TypeScript risiede negli IDE di sviluppo e negli editor come Visual Studio Code che ci assistono con intellisense ed evidenziazione degli errori già durante la digitazione del codice. Si tratta di ausili molto utili alla nostra "sopravvivenza", se pensiamo a quanto tempo richiederebbe il debuggare a runtime un'applicazione complessa scritta in JavaScript.
Essendo un linguaggio che introduce i vantaggi dei linguaggi staticamente tipizzati, quindi, il TypeScript ci permette di essere più produttivi.
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
Routing statico e PreRendering in una Blazor Web App
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Assegnare un valore di default a un parametro di una lambda in C#
Eseguire operazioni con timeout in React
Usare il versioning con i controller di ASP.NET Core Web API
Reactive form tipizzati con FormBuilder in Angular
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Criptare la comunicazione con mTLS in Azure Container Apps
Sostituire la GitHub Action di login su private registry
Utilizzare Tailwind CSS all'interno di React: primi componenti
Cambiare la chiave di partizionamento di Azure Cosmos DB
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - 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 - 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
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)
In evidenza
- Il meglio della settimana
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions