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
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Estrarre dati randomici da una lista di oggetti in C#
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare politiche di resiliency con Azure Container App
Sfruttare al massimo i topic space di Event Grid MQTT
Migrare una service connection a workload identity federation in Azure DevOps
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
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
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Creare una libreria CSS universale: Cards
- Eseguire script pre e post esecuzione di un workflow di GitHub
In evidenza
- Il meglio della settimana
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- 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