Utilizzare TypeScript per creare applicazioni con Angular 2

di , in HTML5,

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}!";
    }
}
...il compilatore tsc produrrà la seguente versione JavaScript compatibile con EcmaScript5.
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

Visualizza/aggiungi commenti

Utilizzare TypeScript per creare applicazioni con Angular 2 1010 3
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti