TypeScript: un’introduzione all’estensione tipizzata di JavaScript

TypeScript offre una serie di funzioni fondamentali che migliorano in modo determinante lo sviluppo di applicazioni web. Questo tutorial dedicato a TypeScript ti permette di entrare nel mondo di questo linguaggio di programmazione con spiegazioni sulle sue principali caratteristiche, applicazioni, vantaggi e svantaggi.

Che cos’è TypeScript?

TypeScript è un’estensione di JavaScript sviluppata da Microsoft e molto diffusa nel mondo dello sviluppo web. Una delle sue caratteristiche eccezionali è la tipizzazione statica. Al contrario di JavaScript, che presenta una tipizzazione dinamica, TypeScript ti permette di dichiarare i tipi di dati per variabili, funzioni e parametri. In questo modo si favorisce un rilevamento tempestivo degli errori ancora prima dell’esecuzione del codice. La tipizzazione statica migliora quindi notevolmente la qualità del codice e ne aumenta al tempo stesso la leggibilità.

La sintassi di TypeScript è sostanzialmente identica a quella di JavaScript, facilitando quindi l’integrazione in progetti JavaScript già esistenti. In effetti, TypeScript è un superset di JavaScript, ossia qualunque codice JavaScript corretto è anche un codice TypeScript valido. In questo modo è possibile passare gradualmente a questo linguaggio e beneficiare dei vantaggi della tipizzazione statica e di altre funzionalità senza dover riscrivere completamente la tua attuale base di codice.

Un semplice esempio di JavaScript è il seguente:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

In questo codice JavaScript la funzione greet non è limitata a un determinato tipo di dati per il parametro name. In questo modo è possibile richiamare la funzione senza errori anche se come argomento assegniamo un numero.

In TypeScript il codice può presentarsi nel modo seguente:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Qui abbiamo dichiarato esplicitamente il parametro name come stringa di caratteri (string). A questo punto, se proviamo a richiamare la funzione con un numero, TypeScript segnala un errore in quanto il tipo di dati assegnato non corrisponde al tipo di dati previsto.

Questo esempio mostra il modo in cui TypeScript è in grado di aiutarti a riconoscere tempestivamente gli errori e ad aumentare la qualità del codice impedendo l’utilizzo di tipi di dati errati. Tuttavia, è importante ricordare che in fondo TypeScript viene compilato in JavaScript e quindi può essere eseguito in qualsiasi ambiente JavaScript. Pertanto, è possibile sfruttare i vantaggi della sicurezza rispetto al tipo solo durante la fase di sviluppo.

I campi di applicazione di TypeScript

TypeScript è un componente fondamentale in molti campi di applicazione dello sviluppo software, in particolare in quelle situazioni in cui la sicurezza rispetto al tipo e la qualità del codice hanno un’importanza decisiva.

Un importante campo di utilizzo di questo linguaggio è lo sviluppo web. In questo ambito, TypeScript serve a scrivere codice JavaScript più sicuro e di più facile manutenzione. Questa possibilità è vantaggiosa per i progetti front end di grandi dimensioni che presentano una base di codice complessa. Tuttavia, è possibile implementare TypeScript anche lato server (back end) in applicazioni Node.js per offrire un ulteriore livello di sicurezza. In architetture serverless come AWS Lambda e Azure Functions, TypeScript aiuta a ridurre gli errori e a garantire un’esecuzione affidabile.

Lo sviluppo cross-platform è un ulteriore ambito in cui TypeScript mette in mostra i suoi punti di forza. L’estensione permette di ottimizzare sensibilmente lo sviluppo di applicazioni e app per dispositivi mobili su più piattaforme. Alcuni Framework come NativeScript e React Native supportano TypeScript nella programmazione di app per dispositivi mobili per diverse piattaforme. Nello sviluppo di giochi, TypeScript è utilizzato in progetti che richiedono l’uso di WebGL o motori di gioco come Phaser o Babylon.js. La sicurezza rispetto al tipo di TypeScript contribuisce a migliorare la qualità e le possibilità di manutenzione del gioco.

TypeScript è utilizzato anche per la visualizzazione e i progetti di analisi dei dati. Le librerie come D3.js supportano questo linguaggio e consentono di creare complesse dashboard e visualizzazioni.

Come installare TypeScript

L’installazione di TypeScript è facile e richiede soltanto pochi passaggi. È possibile installarlo con npm (Node Package Manager) se hai già Node.js sul tuo computer.

Primo passaggio: scaricare Node.js

Controlla se hai già installato Node.js sul tuo computer. Se non lo hai ancora configurato, puoi scaricarlo e installarlo dal sito web ufficiale.

Secondo passaggio: installare TypeScript nel terminale

Apri la riga di comando (ad esempio il prompt dei comandi “Esegui” di Windows o il terminale su macOS o Linux) e digita il seguente comando per eseguire un’installazione globale di TypeScript:

npm install -g typescript

Il flag -g (globale) installa TypeScript sul tuo sistema nel suo complesso, in modo da poterlo utilizzare da qualunque posizione.

Terzo passaggio: visualizzare la versione installata

È possibile eseguire un test per verificare che l’installazione sia andata a buon fine per mezzo del comando seguente:

tsc -v

Questo comando mostra la versione installata di TypeScript. Se vedi il numero di versione, l’installazione è riuscita.

Dopo l’installazione puoi creare file TypeScript (con estensione .ts) ed eseguire la compilazione con il compilatore di TypeScript tsc per generare file JavaScript.

Quarto passaggio: creare file TypeScript

Crea un file TypeScript, ad esempio app.ts, e aggiungi il tuo codice TypeScript.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

Quinto passaggio: compilare il file

Compila il file TypeScript con il seguente comando:

tsc app.ts

In questo modo, app.ts viene compilato in un file JavaScript con il nome app.js. Successivamente puoi eseguire il file JavaScript.

Caratteristiche di TypeScript

Lo sviluppo web ha compiuto notevoli passi avanti negli ultimi anni e TypeScript si è imposto come alternativa estremamente efficiente a JavaScript. Nelle parti seguenti trovi un riepilogo delle sue principali caratteristiche.

Tipizzazione statica

La tipizzazione statica è un aspetto fondamentale di TypeScript e si riferisce alla definizione dei tipi di dati per variabili, parametri, funzioni e altri elementi del tuo codice. Al contrario della tipizzazione dinamica in JavaScript, con la quale i tipi di dati sono rilevati in base al tempo di esecuzione, la dichiarazione dei tipi di dati in TypeScript ha luogo già durante lo sviluppo, prima dell’esecuzione del codice. I tipi facilitano quindi un rilevamento precoce degli errori e dei problemi logici.

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

Questo esempio utilizza la tipizzazione statica per la funzione add. I due parametri a e b sono dichiarati come numeri (number) e la funzione restituisce un valore del tipo number. In questo modo i tentativi di eseguire questa funzione con altri tipi di dati vengono rilevati come errori da TypeScript.

Tipizzazione opzionale

Con la tipizzazione opzionale è possibile assegnare dei tipi a determinati parametri e variabili, mentre altri rimangono senza una tipizzazione esplicita.

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

La funzione sayHello è definita con i parametri name e age. La designazione any indica che il parametro age può accettare qualsiasi tipo di dati.

Funzioni ES6+

TypeScript supporta le moderne funzionalità di JavaScript, tra cui ES6 e funzioni più recenti come le arrow function e le template string.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

Le funzioni freccia (arrow function) permettono di accorciare e rendere più precisa la sintassi.

Organizzazione del codice

Grazie ai moduli e ai namespace, TypeScript offre una migliore organizzazione del codice e permette di suddividere il codice in parti riutilizzabili.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

Questo esempio mostra l’organizzazione del codice per mezzo di moduli e con l’utilizzo di import ed export. La funzione add è definita in un modulo Math.ts separato ed è quindi importata e integrata in un altro modulo Main.ts.

Programmazione orientata agli oggetti (OOP)

TypeScript facilita la programmazione orientata agli oggetti in quanto comprende l’utilizzo di classi in TypeScript, interfacce ed ereditarietà.

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

Questo esempio mostra l’utilizzo delle classi e della programmazione orientata agli oggetti (OOP) in TypeScript. La classe Person ha le proprietà name, age e un metodo greet per presentarsi e fornire informazioni su di sé.

Sistema dei tipi esteso

Il sistema dei tipi di TypeScript è vasto e flessibile. È possibile creare tipi e interfacce personalizzati e addirittura espandere i tipi esistenti.

interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

L’interfaccia Animal definisce una proprietà name, mentre l’interfaccia Dog eredita da Animal e aggiunge un’ulteriore proprietà breed. L’oggetto myDog possiede le caratteristiche di entrambe le interfacce.

Compatibilità con JavaScript

TypeScript è compatibile con JavaScript e può essere eseguito in qualsiasi ambiente JavaScript. Questa possibilità facilita l’introduzione graduale di TypeScript in progetti JavaScript già esistenti.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

Il codice JavaScript (senza tipizzazione) può essere utilizzato senza problemi in un codice TypeScript (con tipizzazione).

Quali sono i vantaggi e gli svantaggi di TypeScript?

TypeScript offre numerosi vantaggi, ma presenta anche alcuni svantaggi. A seguire trovi una panoramica dei punti a favore e a sfavore:

Vantaggi

TypeScript dispone di un vasto ecosistema di definizioni dei tipi per molte librerie JavaScript e framework. In questo modo l’integrazione di codice di terze parti nei progetti TypeScript avviene in modo diretto e senza difficoltà. Questa caratteristica è utile nel mondo delle moderne applicazioni basate sul web, che dipendono spesso da più librerie e framework.

Oltre alla tipizzazione statica, TypeScript offre un’ampia scelta di funzionalità di sviluppo, tra cui interfacce, classi, moduli e il supporto per i recenti standard ECMAScript. Queste caratteristiche migliorano la strutturazione del codice, agevolano la manutenzione e la scalabilità dei progetti e promuovono la produttività in fase di sviluppo. Questo linguaggio trova anche eccellente supporto da parte di molti ambienti di sviluppo integrati (IDE) come Visual Studio Code.

Svantaggi

TypeScript richiede un certo periodo di apprendimento, in particolare se prima gli sviluppatori hanno lavorato solo con JavaScript. Il codice in TypeScript deve essere compilato in JavaScript prima di poter essere eseguito nei browser o in ambienti Node.js. Questo comporta un ulteriore passaggio nel processo di sviluppo.

Nei progetti più piccoli, TypeScript può essere visto come eccessivamente complesso, in quanto i vantaggi della sicurezza rispetto al tipo potrebbero non essere così evidenti. I progetti in questo linguaggio possono richiedere più risorse per via delle informazioni aggiuntive sui tipi e della fase di compilazione.

Alternative a TypeScript

Esistono diversi linguaggi di programmazione web alternativi a TypeScript, a seconda dei requisiti specifici di un progetto e delle preferenze degli sviluppatori.

• Flow: Flow è una tipizzazione statica sviluppata da Facebook per JavaScript. Permette l’aggiunta di tipi al codice JavaScript senza dover eseguire il passaggio a TypeScript. È una valida scelta se desideri integrare gradualmente la tipizzazione nei tuoi progetti in JavaScript.
• Dart: si tratta di un linguaggio di programmazione sviluppato da Google che puoi utilizzare per creare applicazioni web e app mobili. Offre sicurezza rispetto al tipo e buone prestazioni. È utilizzato spesso in combinazione con il framework Flutter per lo sviluppo di app mobili.
• PureScript: PureScript è un linguaggio di programmazione fortemente tipizzato che offre una forte sicurezza rispetto al tipo e uno stile di programmazione funzionale. Permette l’importazione di librerie di JavaScript.
• Elm: Elm è un linguaggio funzionale fortemente tipizzato, pensato per lo sviluppo di applicazioni web. Sostiene il principio di “Elm Architecture” e offre un’elevata sicurezza rispetto al tipo.
• ReasonML (BuckleScript): un linguaggio sviluppato da Facebook e basato su OCaml. BuckleScript è un compilatore che compila ReasonML in JavaScript. Offre inoltre sicurezza rispetto al tipo e una forte integrazione con React per lo sviluppo front end.