TypeScript: cosa è, a cosa serve e mini tutorial

Cos’è TypeScript?

TypeScript è un linguaggio di programmazione sviluppato da Microsoft, un superset di JavaScript che aggiunge tipizzazione statica e oggetti, migliorando la gestione e la scalabilità dei progetti di sviluppo software.

In sostanza, si tratta di un linguaggio che estende il linguaggio di base Javascript, aggiungendo tutta una serie di caratteristiche che lo rendono molto più versatile e potente.

TypeScript è stato rilasciato per la prima volta da Microsoft nel 2012. Ideato da Anders Hejlsberg, l’architetto dietro a linguaggi di programmazione noti come C# e Delphi, TypeScript è nato dalla necessità di risolvere alcune limitazioni della scalabilità dei progetti JavaScript, specialmente in applicazioni di grandi dimensioni.

L’obiettivo di Microsoft con questo prodotto era di creare uno strumento che rendesse il codice JavaScript più sicuro e manutenibile, introducendo concetti più moderni, derivati dai linguaggi di programmazione orientati agli oggetti.

Oggi TypeScript è una scelta quasi obbligata per molti professionisti che si occupano di sviluppo web e la crescente popolarità aumenta la richiesta di sviluppatori che lo padroneggiano.

A cosa serve TypeScript?

TypeScript serve primariamente a migliorare e semplificare lo sviluppo di applicazioni JavaScript, in particolar modo quelle di grandi dimensioni.

Il suo sistema di tipizzazione statica consente agli sviluppatori di definire in modo esplicito i tipi di variabili, funzioni e oggetti, rendendo il codice più leggibile, sicuro e facile da debuggare. Questo approccio minimizza gli errori comuni in JavaScript, specialmente quelli legati alla manipolazione dei dati.

Inoltre, TypeScript offre una migliore esperienza di sviluppo con funzionalità come l’autocompletamento del codice e l’interfaccia per gli strumenti di sviluppo, facilitando la gestione di progetti complessi e collaborativi.

La sua compatibilità con JavaScript lo rende anche un ottimo strumento per modernizzare i progetti esistenti, senza dover riscrivere completamente il codice originario.

Le particolarità di TypeScript

Questo linguaggio ha una serie di particolarità e caratteristiche uniche:

• Tipizzazione statica. Controllo del tipo del dato in fase di compilazione, per prevenire bug e per migliorare la sicurezza del codice.
• Tipi avanzati. Supporto per union, intersection, generics e tipi condizionali, rendendo quindi disponibile allo sviluppatore una buona capacità di astrazione e modellazione.
• Compatibilità ES6/ESNext. Integra caratteristiche moderne di JavaScript come classi, decoratori e interfacce, favorendo lo sviluppo orientato agli oggetti.
• Supporto al tooling. Intellisense, refactoring del codice e analisi statica, per offrire allo sviluppatore un’esperienza di coding migliore ed una più efficiente manutenibilità del codice.
• Interoperabilità con JavaScript. Permette una migrazione graduale e flessibile da JavaScript, facilitandone l’adozione in progetti legacy.
• Comunità e ecosistema. Questo linguaggio di programmazione è supportato da un’estesa comunità di sviluppatori e presenta un ecosistema in crescita di tipi definiti dagli utenti attraverso DefinitelyTyped, garantendo versatilità e adattabilità.

Mini tutorial

Tanto per dare un’idea della sintassi, realizziamo un programma in TypeScript che serva per mostrare l’orario del client in diversi fusi orari. In particolare implementeremo una specifica classe, WorldClock, che successivamente instanzieremo.

class WorldClock {
    // La funzione 'showTime' riceve un fuso orario e mostra l'ora corrente in quel fuso.
    showTime(timeZone: string): string {
        // Crea un oggetto Date che contiene l'ora corrente del sistema.
        const now = new Date();

        // Usa 'toLocaleTimeString' per convertire l'ora corrente nel formato di ora del fuso orario specificato.
        // 'timeZone' è un parametro che definisce il fuso orario desiderato.
        return now.toLocaleTimeString('it-IT', { timeZone });
    }
}

// Creazione di un'istanza della classe WorldClock
const clock = new WorldClock();

// Esempi di chiamata della funzione 'showTime' con diversi fusi orari.
console.log("Ora a New York: " + clock.showTime('America/New_York'));
console.log("Ora a Tokyo: " + clock.showTime('Asia/Tokyo'));
console.log("Ora a Londra: " + clock.showTime('Europe/London'));

Ecco una sintetica spiegazione:

1. Definizione della Classe: WorldClock è una classe che contiene il metodo per mostrare l’ora in diversi fusi orari.
2. Metodo showTime: Questo metodo accetta un parametro timeZone (una stringa) che rappresenta il fuso orario desiderato.
3. Oggetto Date e toLocaleTimeString: Utilizziamo un oggetto Date per ottenere l’ora corrente del sistema e poi toLocaleTimeString per formattare questa ora nel fuso orario specificato. toLocaleTimeString accetta la localizzazione (‘it-IT’ per italiano) e un oggetto opzioni dove definiamo il fuso orario.
4. Istanza della Classe e Output: Creiamo un’istanza di WorldClock e chiamiamo showTime con diversi fusi orari. I risultati sono mostrati sulla console.

Per vedere il codice all’opera, fai pure copia e incolla (senza i numeri di riga) in questo simulatore online, un TypeScript Playground.

FAQ

Roberto Di Bartolomeo

Roberto Di Bartolomeo ha maturato una lunga esperienza professionale in ambito IT ed Organizzazione, rivestendo ruoli dirigenziali di CIO in grandi aziende nelle industries servizi HR, banking e pubblica amministrazione. Ingegnere elettronico, ha speso i primi anni della sua carriera in una società di consulenza internazionale ed ha conseguito un master alla Bocconi di Milano. E’ partner di EgoValeo e consulente per la Digital Transformation.