Ty­pe­Script: un’in­tro­du­zio­ne all’esten­sio­ne tipizzata di Ja­va­Script

Ty­pe­Script offre una serie di funzioni fon­da­men­ta­li che mi­glio­ra­no in modo de­ter­mi­nan­te lo sviluppo di ap­pli­ca­zio­ni web. Questo tutorial dedicato a Ty­pe­Script ti permette di entrare nel mondo di questo lin­guag­gio di pro­gram­ma­zio­ne con spie­ga­zio­ni sulle sue prin­ci­pa­li ca­rat­te­ri­sti­che, ap­pli­ca­zio­ni, vantaggi e svantaggi.

Che cos’è Ty­pe­Script?

Ty­pe­Script è un’esten­sio­ne di Ja­va­Script svi­lup­pa­ta da Microsoft e molto diffusa nel mondo dello sviluppo web. Una delle sue ca­rat­te­ri­sti­che ec­ce­zio­na­li è la ti­piz­za­zio­ne statica. Al contrario di Ja­va­Script, che presenta una ti­piz­za­zio­ne dinamica, Ty­pe­Script ti permette di di­chia­ra­re i tipi di dati per variabili, funzioni e parametri. In questo modo si favorisce un ri­le­va­men­to tem­pe­sti­vo degli errori ancora prima dell’ese­cu­zio­ne del codice. La ti­piz­za­zio­ne statica migliora quindi no­te­vol­men­te la qualità del codice e ne aumenta al tempo stesso la leg­gi­bi­li­tà.

La sintassi di Ty­pe­Script è so­stan­zial­men­te identica a quella di Ja­va­Script, fa­ci­li­tan­do quindi l’in­te­gra­zio­ne in progetti Ja­va­Script già esistenti. In effetti, Ty­pe­Script è un superset di Ja­va­Script, ossia qualunque codice Ja­va­Script corretto è anche un codice Ty­pe­Script valido. In questo modo è possibile passare gra­dual­men­te a questo lin­guag­gio e be­ne­fi­cia­re dei vantaggi della ti­piz­za­zio­ne statica e di altre fun­zio­na­li­tà senza dover ri­scri­ve­re com­ple­ta­men­te la tua attuale base di codice.

Un semplice esempio di Ja­va­Script è il seguente:

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

In questo codice Ja­va­Script la funzione greet non è limitata a un de­ter­mi­na­to tipo di dati per il parametro name. In questo modo è possibile ri­chia­ma­re la funzione senza errori anche se come argomento as­se­gnia­mo un numero.

In Ty­pe­Script il codice può pre­sen­tar­si nel modo seguente:

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

Qui abbiamo di­chia­ra­to espli­ci­ta­men­te il parametro name come stringa di caratteri (string). A questo punto, se proviamo a ri­chia­ma­re la funzione con un numero, Ty­pe­Script segnala un errore in quanto il tipo di dati assegnato non cor­ri­spon­de al tipo di dati previsto.

Questo esempio mostra il modo in cui Ty­pe­Script è in grado di aiutarti a ri­co­no­sce­re tem­pe­sti­va­men­te gli errori e ad aumentare la qualità del codice impedendo l’utilizzo di tipi di dati errati. Tuttavia, è im­por­tan­te ricordare che in fondo Ty­pe­Script viene compilato in Ja­va­Script e quindi può essere eseguito in qualsiasi ambiente Ja­va­Script. Pertanto, è possibile sfruttare i vantaggi della sicurezza rispetto al tipo solo durante la fase di sviluppo.

I campi di ap­pli­ca­zio­ne di Ty­pe­Script

Ty­pe­Script è un com­po­nen­te fon­da­men­ta­le in molti campi di ap­pli­ca­zio­ne dello sviluppo software, in par­ti­co­la­re in quelle si­tua­zio­ni in cui la sicurezza rispetto al tipo e la qualità del codice hanno un’im­por­tan­za decisiva.

Un im­por­tan­te campo di utilizzo di questo lin­guag­gio è lo sviluppo web. In questo ambito, Ty­pe­Script serve a scrivere codice Ja­va­Script più sicuro e di più facile ma­nu­ten­zio­ne. Questa pos­si­bi­li­tà è van­tag­gio­sa per i progetti front end di grandi di­men­sio­ni che pre­sen­ta­no una base di codice complessa. Tuttavia, è possibile im­ple­men­ta­re Ty­pe­Script anche lato server (back end) in ap­pli­ca­zio­ni Node.js per offrire un ulteriore livello di sicurezza. In ar­chi­tet­tu­re ser­ver­less come AWS Lambda e Azure Functions, Ty­pe­Script aiuta a ridurre gli errori e a garantire un’ese­cu­zio­ne af­fi­da­bi­le.

Lo sviluppo cross-platform è un ulteriore ambito in cui Ty­pe­Script mette in mostra i suoi punti di forza. L’esten­sio­ne permette di ot­ti­miz­za­re sen­si­bil­men­te lo sviluppo di ap­pli­ca­zio­ni e app per di­spo­si­ti­vi mobili su più piat­ta­for­me. Alcuni Framework come Na­ti­ve­Script e React Native sup­por­ta­no Ty­pe­Script nella pro­gram­ma­zio­ne di app per di­spo­si­ti­vi mobili per diverse piat­ta­for­me. Nello sviluppo di giochi, Ty­pe­Script è uti­liz­za­to in progetti che ri­chie­do­no l’uso di WebGL o motori di gioco come Phaser o Babylon.js. La sicurezza rispetto al tipo di Ty­pe­Script con­tri­bui­sce a mi­glio­ra­re la qualità e le pos­si­bi­li­tà di ma­nu­ten­zio­ne del gioco.

Ty­pe­Script è uti­liz­za­to anche per la vi­sua­liz­za­zio­ne e i progetti di analisi dei dati. Le librerie come D3.js sup­por­ta­no questo lin­guag­gio e con­sen­to­no di creare complesse dashboard e vi­sua­liz­za­zio­ni.

Come in­stal­la­re Ty­pe­Script

L’in­stal­la­zio­ne di Ty­pe­Script è facile e richiede soltanto pochi passaggi. È possibile in­stal­lar­lo con npm (Node Package Manager) se hai già Node.js sul tuo computer.

Primo passaggio: scaricare Node.js

Controlla se hai già in­stal­la­to Node.js sul tuo computer. Se non lo hai ancora con­fi­gu­ra­to, puoi sca­ri­car­lo e in­stal­lar­lo dal sito web ufficiale.

Secondo passaggio: in­stal­la­re Ty­pe­Script 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’in­stal­la­zio­ne globale di Ty­pe­Script:

npm install -g typescript

Il flag -g (globale) installa Ty­pe­Script sul tuo sistema nel suo complesso, in modo da poterlo uti­liz­za­re da qualunque posizione.

Terzo passaggio: vi­sua­liz­za­re la versione in­stal­la­ta

È possibile eseguire un test per ve­ri­fi­ca­re che l’in­stal­la­zio­ne sia andata a buon fine per mezzo del comando seguente:

tsc -v

Questo comando mostra la versione in­stal­la­ta di Ty­pe­Script. Se vedi il numero di versione, l’in­stal­la­zio­ne è riuscita.

Dopo l’in­stal­la­zio­ne puoi creare file Ty­pe­Script (con esten­sio­ne .ts) ed eseguire la com­pi­la­zio­ne con il com­pi­la­to­re di Ty­pe­Script tsc per generare file Ja­va­Script.

Quarto passaggio: creare file Ty­pe­Script

Crea un file Ty­pe­Script, ad esempio app.ts, e aggiungi il tuo codice Ty­pe­Script.

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 Ty­pe­Script con il seguente comando:

tsc app.ts

In questo modo, app.ts viene compilato in un file Ja­va­Script con il nome app.js. Suc­ces­si­va­men­te puoi eseguire il file Ja­va­Script.

Ca­rat­te­ri­sti­che di Ty­pe­Script

Lo sviluppo web ha compiuto notevoli passi avanti negli ultimi anni e Ty­pe­Script si è imposto come al­ter­na­ti­va estre­ma­men­te ef­fi­cien­te a Ja­va­Script. Nelle parti seguenti trovi un riepilogo delle sue prin­ci­pa­li ca­rat­te­ri­sti­che.

Ti­piz­za­zio­ne statica

La ti­piz­za­zio­ne statica è un aspetto fon­da­men­ta­le di Ty­pe­Script e si riferisce alla de­fi­ni­zio­ne dei tipi di dati per variabili, parametri, funzioni e altri elementi del tuo codice. Al contrario della ti­piz­za­zio­ne dinamica in Ja­va­Script, con la quale i tipi di dati sono rilevati in base al tempo di ese­cu­zio­ne, la di­chia­ra­zio­ne dei tipi di dati in Ty­pe­Script ha luogo già durante lo sviluppo, prima dell’ese­cu­zio­ne del codice. I tipi fa­ci­li­ta­no quindi un ri­le­va­men­to 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 ti­piz­za­zio­ne statica per la funzione add. I due parametri a e b sono di­chia­ra­ti come numeri (number) e la funzione re­sti­tui­sce un valore del tipo number. In questo modo i tentativi di eseguire questa funzione con altri tipi di dati vengono rilevati come errori da Ty­pe­Script.

Ti­piz­za­zio­ne opzionale

Con la ti­piz­za­zio­ne opzionale è possibile assegnare dei tipi a de­ter­mi­na­ti parametri e variabili, mentre altri rimangono senza una ti­piz­za­zio­ne 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 de­si­gna­zio­ne any indica che il parametro age può accettare qualsiasi tipo di dati.

Funzioni ES6+

Ty­pe­Script supporta le moderne fun­zio­na­li­tà di Ja­va­Script, 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) per­met­to­no di ac­cor­cia­re e rendere più precisa la sintassi.

Or­ga­niz­za­zio­ne del codice

Grazie ai moduli e ai namespace, Ty­pe­Script offre una migliore or­ga­niz­za­zio­ne del codice e permette di sud­di­vi­de­re il codice in parti riu­ti­liz­za­bi­li.

// 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’or­ga­niz­za­zio­ne 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.

Pro­gram­ma­zio­ne orientata agli oggetti (OOP)

Ty­pe­Script facilita la pro­gram­ma­zio­ne orientata agli oggetti in quanto comprende l’utilizzo di classi in Ty­pe­Script, in­ter­fac­ce ed ere­di­ta­rie­tà.

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 pro­gram­ma­zio­ne orientata agli oggetti (OOP) in Ty­pe­Script. La classe Person ha le proprietà name, age e un metodo greet per pre­sen­tar­si e fornire in­for­ma­zio­ni su di sé.

Sistema dei tipi esteso

Il sistema dei tipi di Ty­pe­Script è vasto e fles­si­bi­le. È possibile creare tipi e in­ter­fac­ce per­so­na­liz­za­ti e ad­di­rit­tu­ra espandere i tipi esistenti.

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

L’in­ter­fac­cia Animal definisce una proprietà name, mentre l’in­ter­fac­cia Dog eredita da Animal e aggiunge un’ulteriore proprietà breed. L’oggetto myDog possiede le ca­rat­te­ri­sti­che di entrambe le in­ter­fac­ce.

Com­pa­ti­bi­li­tà con Ja­va­Script

Ty­pe­Script è com­pa­ti­bi­le con Ja­va­Script e può essere eseguito in qualsiasi ambiente Ja­va­Script. Questa pos­si­bi­li­tà facilita l’in­tro­du­zio­ne graduale di Ty­pe­Script in progetti Ja­va­Script già esistenti.

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

Il codice Ja­va­Script (senza ti­piz­za­zio­ne) può essere uti­liz­za­to senza problemi in un codice Ty­pe­Script (con ti­piz­za­zio­ne).

Quali sono i vantaggi e gli svantaggi di Ty­pe­Script?

Ty­pe­Script offre numerosi vantaggi, ma presenta anche alcuni svantaggi. A seguire trovi una pa­no­ra­mi­ca dei punti a favore e a sfavore:

Vantaggi

Ty­pe­Script dispone di un vasto eco­si­ste­ma di de­fi­ni­zio­ni dei tipi per molte librerie Ja­va­Script e framework. In questo modo l’in­te­gra­zio­ne di codice di terze parti nei progetti Ty­pe­Script avviene in modo diretto e senza dif­fi­col­tà. Questa ca­rat­te­ri­sti­ca è utile nel mondo delle moderne ap­pli­ca­zio­ni basate sul web, che dipendono spesso da più librerie e framework.

Oltre alla ti­piz­za­zio­ne statica, Ty­pe­Script offre un’ampia scelta di fun­zio­na­li­tà di sviluppo, tra cui in­ter­fac­ce, classi, moduli e il supporto per i recenti standard EC­MA­Script. Queste ca­rat­te­ri­sti­che mi­glio­ra­no la strut­tu­ra­zio­ne del codice, agevolano la ma­nu­ten­zio­ne e la sca­la­bi­li­tà dei progetti e pro­muo­vo­no la pro­dut­ti­vi­tà in fase di sviluppo. Questo lin­guag­gio trova anche ec­cel­len­te supporto da parte di molti ambienti di sviluppo integrati (IDE) come Visual Studio Code.

Svantaggi

Ty­pe­Script richiede un certo periodo di ap­pren­di­men­to, in par­ti­co­la­re se prima gli svi­lup­pa­to­ri hanno lavorato solo con Ja­va­Script. Il codice in Ty­pe­Script deve essere compilato in Ja­va­Script 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, Ty­pe­Script può essere visto come ec­ces­si­va­men­te complesso, in quanto i vantaggi della sicurezza rispetto al tipo po­treb­be­ro non essere così evidenti. I progetti in questo lin­guag­gio possono ri­chie­de­re più risorse per via delle in­for­ma­zio­ni ag­giun­ti­ve sui tipi e della fase di com­pi­la­zio­ne.

Al­ter­na­ti­ve a Ty­pe­Script

Esistono diversi linguaggi di pro­gram­ma­zio­ne web al­ter­na­ti­vi a Ty­pe­Script, a seconda dei requisiti specifici di un progetto e delle pre­fe­ren­ze degli svi­lup­pa­to­ri.

• Flow: Flow è una ti­piz­za­zio­ne statica svi­lup­pa­ta da Facebook per Ja­va­Script. Permette l’aggiunta di tipi al codice Ja­va­Script senza dover eseguire il passaggio a Ty­pe­Script. È una valida scelta se desideri integrare gra­dual­men­te la ti­piz­za­zio­ne nei tuoi progetti in Ja­va­Script.
• Dart: si tratta di un lin­guag­gio di pro­gram­ma­zio­ne svi­lup­pa­to da Google che puoi uti­liz­za­re per creare ap­pli­ca­zio­ni web e app mobili. Offre sicurezza rispetto al tipo e buone pre­sta­zio­ni. È uti­liz­za­to spesso in com­bi­na­zio­ne con il framework Flutter per lo sviluppo di app mobili.
• Pu­re­Script: Pu­re­Script è un lin­guag­gio di pro­gram­ma­zio­ne for­te­men­te tipizzato che offre una forte sicurezza rispetto al tipo e uno stile di pro­gram­ma­zio­ne fun­zio­na­le. Permette l’im­por­ta­zio­ne di librerie di Ja­va­Script.
• Elm: Elm è un lin­guag­gio fun­zio­na­le for­te­men­te tipizzato, pensato per lo sviluppo di ap­pli­ca­zio­ni web. Sostiene il principio di “Elm Ar­chi­tec­tu­re” e offre un’elevata sicurezza rispetto al tipo.
• ReasonML (Buc­kle­Script): un lin­guag­gio svi­lup­pa­to da Facebook e basato su OCaml. Buc­kle­Script è un com­pi­la­to­re che compila ReasonML in Ja­va­Script. Offre inoltre sicurezza rispetto al tipo e una forte in­te­gra­zio­ne con React per lo sviluppo front end.