Guida Completa a TypeScript per Principianti: Da JavaScript a un Codice Tipizzato

Principiante
JavaScript TypeScript

Scopri cos'è TypeScript, come installarlo e come utilizzarlo per scrivere codice JavaScript più sicuro, manutenibile e professionale.

Pubblicato
Tag
programmazione Web Development javascript frontend tutorial backend TypeScript

Introduzione a TypeScript: Perché ne hai bisogno?

Se hai già avuto esperienza con JavaScript, saprai che è un linguaggio estremamente flessibile e potente. Tuttavia, questa flessibilità ha un prezzo: JavaScript è un linguaggio a tipizzazione dinamica. Ciò significa che una variabile può cambiare tipo durante l'esecuzione del programma senza che il browser ti avvisi.

Immagina di scrivere una funzione che somma due numeri. In JavaScript, se per errore passi una stringa invece di un numero, il linguaggio non genererà un errore immediato, ma concatenerà le stringhe, restituendo un risultato inaspettato (es. "1" + 2 diventa "12" invece di 3). In un progetto di piccole dimensioni, questo è gestibile; in un'applicazione aziendale con migliaia di righe di codice, questi bug diventano incubi da debuggare.

TypeScript, sviluppato da Microsoft, risolve questo problema introducendo la tipizzazione statica. Non è un linguaggio completamente nuovo, ma un "superset" di JavaScript. Questo significa che ogni codice JavaScript valido è anche codice TypeScript valido, ma TypeScript aggiunge funzionalità che permettono di definire i tipi di dati che il tuo codice deve gestire.

Il concetto di Transpilazione

È fondamentale capire che i browser (Chrome, Firefox, Safari) non sanno leggere il codice TypeScript (.ts). Possono leggere solo JavaScript (.js). Pertanto, TypeScript utilizza un processo chiamato transpilazione. Il compilatore di TypeScript analizza il tuo codice, verifica che non ci siano errori di tipo e poi lo "traduce" in JavaScript standard che può essere eseguito ovunque.

Installazione e Configurazione dell'Ambiente

Per iniziare a usare TypeScript, devi avere Node.js installato sul tuo computer, poiché utilizzeremo npm (Node Package Manager) per installare il compilatore.

Passaggio 1: Installazione globale

Apri il tuo terminale e digita il seguente comando per installare TypeScript globalmente nel tuo sistema:

npm install -g typescript

Una volta completata l'installazione, puoi verificare che tutto funzioni correttamente digitando tsc -v (TypeScript Compiler version).

Passaggio 2: Inizializzazione del progetto

Crea una cartella per il tuo progetto e inizializzalo. È buona norma creare un file di configurazione chiamato tsconfig.json, che dice al compilatore come comportarsi (ad esempio, a quale versione di JavaScript convertire il codice).

# Crea la cartella e entra
mkdir mio-progetto-ts
cd mio-progetto-ts

# Inizializza il file di configurazione
tsc --init

Ora hai un ambiente pronto. Puoi creare un file index.ts, scrivere il tuo codice e poi eseguire tsc index.ts per generare il file index.js corrispondente.

I Fondamenti della Tipizzazione

Il cuore di TypeScript è la capacità di assegnare tipi alle variabili. Vediamo i tipi più comuni.

Tipi Primitivi

In TypeScript, puoi dichiarare il tipo di una variabile usando i due punti : dopo il nome della variabile.

  • string: Per testi.
  • number: Per numeri interi e decimali.
  • boolean: Per valori vero/falso.
  • any: Un tipo speciale che disabilita il controllo dei tipi (da usare con estrema cautela!).
let nome: string = "Mario";
let eta: number = 30;
let isSviluppatore: boolean = true;

// Se provassi a fare questo, TypeScript segnalerebbe un errore immediatamente:
// nome = 42; // Errore: Il tipo 'number' non può essere assegnato al tipo 'string'.

Array e Tuple

Gestire le liste di dati è fondamentale. In TypeScript puoi definire che un array deve contenere solo elementi di un certo tipo.

// Array di stringhe
let colori: string[] = ["Rosso", "Verde", "Blu"];

// Array di numeri (sintassi alternativa)
let punteggi: Array<number> = [10, 20, 30];

// Tuple: array a lunghezza fissa con tipi specifici per posizione
let utente: [number, string] = [1, "Luca"];

Funzioni, Interfacce e Tipi Personalizzati

La vera potenza di TypeScript emerge quando iniziamo a definire strutture di dati complesse.

Tipizzazione delle Funzioni

In JavaScript, non sai mai cosa restituisce una funzione senza leggerne l'intero corpo. In TypeScript, puoi definire esplicitamente il tipo dei parametri e il tipo del valore di ritorno.

function calcolaPrezzoTotale(prezzo: number, quantita: number): number {
    return prezzo * quantita;
}

const totale = calcolaPrezzoTotale(10.5, 3); // Funziona
// const errore = calcolaPrezzoTotale("10", 3); // Errore di compilazione!

Interfacce (Interfaces)

Le interfacce permettono di definire la "forma" di un oggetto. Sono essenziali per garantire che gli oggetti che passiamo tra diverse parti dell'applicazione abbiano tutte le proprietà necessarie.

interface Prodotto {
    id: number;
    nome: string;
    prezzo: number;
    descrizione?: string; // Il punto di domanda indica che la proprietà è opzionale
}

const laptop: Prodotto = {
    id: 101,
    nome: "MacBook Pro",
    prezzo: 2000
    // descrizione non è obbligatoria
};

function stampaDettagli(p: Prodotto) {
    console.log(`Il prodotto ${p.nome} costa ${p.prezzo}€`);
}

stampaDettagli(laptop);

Esempi Pratici: Casi d'Uso Reali

Vediamo come applicare questi concetti in uno scenario reale: la gestione di una lista di utenti per un'applicazione web.

Scenario: Gestione Utenti

Supponiamo di voler creare un sistema che filtra gli utenti in base al loro ruolo (Admin o User).

// Definiamo un tipo per i ruoli usando un'Unione di stringhe
type RuoloUtente = "Admin" | "User" | "Guest";

interface Utente {
    id: number;
    username: string;
    email: string;
    ruolo: RuoloUtente;
}

const databaseUtenti: Utente[] = [
    { id: 1, username: "admin_jane", email: "jane@test.com", ruolo: "Admin" },
    { id: 2, username: "user_bob", email: "bob@test.com", ruolo: "User" },
    { id: 3, username: "guest_123", email: "guest@test.com", ruolo: "Guest" },
];

function filtraPerRuolo(utenti: Utente[], ruoloRicercato: RuoloUtente): Utente[] {
    return utenti.filter(u => u.ruolo === ruoloRicercato);
}

const soliAdmin = filtraPerRuolo(databaseUtenti, "Admin");
console.log(soliAdmin);

Perché questo codice è migliore di quello JavaScript?

  1. Autocompletamento: L'IDE (come VS Code) suggerirà automaticamente "Admin", "User" o "Guest" quando chiamiamo filtraPerRuolo.
  2. Sicurezza: Se provassi a passare "SuperAdmin" come ruolo, TypeScript ti avviserebbe che quel valore non è ammesso dal tipo RuoloUtente.
  3. Documentazione: Chiunque legga il codice capisce immediatamente quali dati sono richiesti senza dover cercare dove vengono definiti gli oggetti.

Errori Comuni e FAQ

Perché ricevo l'errore "Property does not exist on type 'Object'?"

Questo accade spesso quando si lavora con API esterne o dati dinamici. In JavaScript, puoi aggiungere proprietà a un oggetto a piacimento. In TypeScript, se dichiari un oggetto come {}, non puoi aggiungere proprietà dopo la creazione. Soluzione: Usa un'interfaccia o un tipo specifico per definire l'oggetto.

Quando usare any?

Il tipo any dice a TypeScript: "Non controllare questo valore, fidati di me". Se lo usi ovunque, TypeScript diventa inutile. Usalo solo come ultima risorsa, ad esempio quando integri librerie JavaScript esterne che non hanno definizioni di tipo disponibili.

TypeScript rallenta l'applicazione?

Assolutamente no. TypeScript esiste solo durante lo sviluppo. Una volta transpilato in JavaScript, il codice che arriva al browser è JavaScript puro. Il "costo" è solo un paio di secondi in più durante la fase di build.

Prossimi Passi

Ora che hai appreso le basi, ecco come puoi continuare il tuo percorso di apprendimento:

  1. Generics: Impara a creare componenti e funzioni riutilizzabili che possono lavorare con diversi tipi di dati senza perdere la sicurezza della tipizzazione.
  2. Enums: Esplora i tipi enumerati per gestire set di costanti correlate.
  3. Integrazione con Framework: Prova a usare TypeScript con React (definendo i tipi per le Props e lo State) o con Vue.js 3.
  4. Advanced Types: Approfondisci i Partial, Omit e Pick per manipolare le interfacce esistenti senza duplicare il codice.

TypeScript non è solo uno strumento, è un modo di pensare al codice: prima definisci i dati (il contratto) e poi scrivi la logica. Questo approccio riduce drasticamente i bug e rende il tuo profilo professionale molto più appetibile per le aziende moderne.

Continua a leggere