Perche ogni progetto web dovrebbe usare TypeScript nel 2021 e oltre

Cos'e TypeScript nella pratica

TypeScript e un superset tipizzato di JavaScript sviluppato da Microsoft. Questa frase viene ripetuta ovunque, ma vediamo cosa significa nella pratica. TypeScript e JavaScript con un livello aggiuntivo: un sistema di tipi. Ogni programma JavaScript valido e anche un programma TypeScript valido. TypeScript aggiunge la possibilita di annotare variabili, parametri di funzione e valori di ritorno con dei tipi, e un compilatore che verifica quei tipi prima che il codice venga eseguito.

Quando scrivete TypeScript, state ancora scrivendo JavaScript. Il compilatore TypeScript (chiamato tsc) rimuove tutte le annotazioni di tipo e produce JavaScript puro che funziona in qualsiasi browser o ambiente Node.js. I tipi esistono solo durante lo sviluppo. Aiutano a trovare errori, documentano il codice e abilitano strumenti migliori. A runtime, e tutto JavaScript.

Questa distinzione conta perche significa che TypeScript non e un nuovo linguaggio da imparare da zero. Se conoscete JavaScript, conoscete gia la maggior parte di TypeScript. La curva di apprendimento sta nel capire il sistema dei tipi, che e incrementale. Potete iniziare con i tipi di base e adottare gradualmente funzionalita piu avanzate quando ne avrete bisogno.

Il problema che TypeScript risolve

JavaScript e un linguaggio a tipizzazione dinamica. Le variabili possono contenere qualsiasi valore in qualsiasi momento. Una variabile che inizia come numero puo diventare una stringa, poi un oggetto, poi undefined. JavaScript non si lamentera finche qualcosa non si rompe a runtime, spesso in produzione, spesso nel momento peggiore possibile.

Considerate questo codice JavaScript:

function calcolaTotale(articoli) { return articoli.reduce((somma, articolo) => somma + articolo.prezzo, 0); }

Questa funzione funziona perfettamente quando le passate un array di oggetti con una proprieta prezzo. Ma cosa succede quando qualcuno le passa un singolo oggetto invece di un array? O un array dove un elemento ha Prezzo (con la P maiuscola) invece di prezzo? O un array che include un valore null? JavaScript non vi avvisera di nessuno di questi scenari.

TypeScript li intercetta tutti in fase di compilazione:

interface ArticoloCarrello { nome: string; prezzo: number; quantita: number; } function calcolaTotale(articoli: ArticoloCarrello[]): number { return articoli.reduce((somma, articolo) => somma + articolo.prezzo, 0); }

Ora il compilatore sa esattamente come deve apparire articoli. Passate un singolo oggetto? Errore. Manca la proprieta prezzo? Errore. null nell'array? Errore. Lo scoprite immediatamente, nel vostro editor, prima che il codice venga mai eseguito.

Perche TypeScript vince: i benefici concreti

Meno bug in produzione

Uno studio dei ricercatori dell'UCL (University College London) ha scoperto che il 15% dei bug JavaScript su GitHub avrebbe potuto essere prevenuto dal sistema di tipi di TypeScript. Cioe il 15% in meno di bug che arrivano in produzione, il 15% in meno di lamentele dei clienti, il 15% in meno di correzioni d'emergenza alle 23 di un venerdi sera.

Nella nostra esperienza di sviluppo di applicazioni web per clienti a Lugano e in tutta la Svizzera, il numero e ancora piu alto per applicazioni aziendali che gestiscono strutture dati complesse. Siti e-commerce, integrazioni CRM, calcolatori finanziari, sistemi di prenotazione: queste applicazioni trattano oggetti annidati, campi opzionali e trasformazioni di dati dove gli errori di tipo sono sia comuni che costosi.

Migliore supporto IDE

Questo e il beneficio che gli sviluppatori sentono piu immediatamente. Con TypeScript, il vostro editor di codice (VS Code, WebStorm, ecc.) puo fornire:

• Autocompletamento accurato: Quando digitate utente., l'editor vi mostra ogni proprieta e metodo disponibile sull'oggetto utente. Non supposizioni basate su cosa avete digitato altrove, ma la definizione effettiva dell'interfaccia.
• Rilevamento errori inline: Gli errori appaiono mentre digitate, non dopo che eseguite il codice.
• Vai alla definizione: Cliccate sul nome di un tipo o funzione per saltare direttamente alla sua definizione.
• Rinomina sicura: Rinominate una proprieta e l'IDE aggiorna ogni riferimento in tutto il progetto.

Refactoring piu facile

Il refactoring e il processo di ristrutturare il codice senza cambiarne il comportamento. In JavaScript, il refactoring fa paura. Rinominate una proprieta, cambiate la firma di una funzione o ristrutturate un modello di dati, e non avete modo di sapere se avete rotto qualcosa finche non eseguite tutti i test e cliccate attraverso ogni pagina.

In TypeScript, il compilatore ve lo dice immediatamente. Avete cambiato la forma di una risposta API? Ogni componente che usa quella risposta mostrera un errore se accede a una proprieta che non esiste piu. Potete fare refactoring con sicurezza perche il compilatore vi copre le spalle.

Questo e particolarmente prezioso per progetti a lunga vita. Un sito web che costruite oggi avra bisogno di modifiche tra sei mesi, un anno, tre anni. Lo sviluppatore che fa quei cambiamenti (che potrebbe non essere l'autore originale) deve capire le strutture dati e i contratti delle funzioni. TypeScript rende quei contratti espliciti e verificabili dalla macchina.

Collaborazione nel team

Quando piu sviluppatori lavorano sulla stessa codebase, TypeScript agisce come un contratto condiviso. Le interfacce definiscono la forma dei dati che fluiscono tra i moduli. Le firme delle funzioni documentano cosa ogni funzione si aspetta e restituisce. Questi contratti sono verificati dal compilatore, quindi non possono diventare obsoleti.

TypeScript vs JavaScript: confronto diretto

Aspetto	JavaScript	TypeScript
Controllo dei tipi	Nessuno (errori a runtime)	Controllo dei tipi a compilazione
Supporto IDE	Base (basato su inferenza)	Completo (autocompletamento, navigazione, refactoring type-aware)
Rilevamento errori	A runtime	A compilazione + runtime
Documentazione	Commenti, JSDoc (spesso obsoleti)	I tipi servono come documentazione vivente
Sicurezza nel refactoring	Bassa	Alta (il compilatore trova i breaking changes)
Curva di apprendimento	Barriera d'ingresso piu bassa	Leggermente piu alta (sistema dei tipi)
Step di build	Opzionale	Necessario (compilazione tsc)
Overhead a runtime	Nessuno	Nessuno (i tipi vengono rimossi alla compilazione)

Come i tipi intercettano gli errori a compilazione

Errori di battitura nei nomi delle proprieta

In JavaScript, utente.emial restituisce undefined silenziosamente. In TypeScript, e un errore di compilazione: "La proprieta 'emial' non esiste sul tipo 'Utente'. Intendevi 'email'?" Questa singola funzionalita da sola intercetta decine di bug per progetto.

Argomenti di funzione sbagliati

Passare una stringa dove ci si aspetta un numero, passare tre argomenti a una funzione che ne prende due, o dimenticare di passare un parametro obbligatorio: tutti questi sono errori di compilazione in TypeScript.

Gestione di null e undefined

Con strictNullChecks abilitato, TypeScript vi obbliga a gestire i casi in cui un valore potrebbe essere null o undefined. Non potete chiamare .toString() su un valore che potrebbe essere null senza prima verificarlo. Questo elimina l'intera classe di errori "Cannot read property of null".

Iniziare: le basi

Il file tsconfig.json

Ogni progetto TypeScript inizia con un file tsconfig.json che configura il compilatore. Il flag "strict": true e l'impostazione piu significativa. Abilita tutti i controlli di tipo rigorosi. Iniziate con lo strict. E molto piu difficile abilitare i controlli rigorosi dopo che iniziare con essi dall'inizio.

Tipi di base

• string, number, boolean: i primitivi
• string[] o Array<string>: array di un tipo specifico
• { name: string; age: number }: tipi oggetto
• any: uscire dal controllo dei tipi (evitatelo)
• unknown: l'alternativa sicura a any
• void: funzioni che non restituiscono un valore

Interfacce e type alias

Le interfacce definiscono la forma degli oggetti. Sono la spina dorsale del sistema dei tipi di TypeScript:

interface Utente { id: number; nome: string; email: string; ruolo: 'admin' | 'editor' | 'viewer'; creatoIl: Date; }

Generics

I generics vi permettono di scrivere codice riutilizzabile che funziona con tipi multipli mantenendo la sicurezza dei tipi:

function getPrimo<T>(elementi: T[]): T | undefined { return elementi[0]; }

Framework che usano TypeScript

TypeScript non e una scelta marginale. E diventato lo standard per i principali framework nello sviluppo web:

• Angular: Scritto in TypeScript dalla versione 2 in poi. Angular richiede TypeScript.
• Next.js: Supporto TypeScript di prima classe. I nuovi progetti vengono creati con TypeScript di default.
• Astro: Costruito con TypeScript, supporto completo per lo sviluppo dei progetti. Questo e il framework che usiamo a Envestis per molti dei nostri progetti.
• Deno: Il runtime creato dall'autore originale di Node.js. Supporta TypeScript nativamente senza un passaggio di compilazione separato.
• Vue 3: Riscritto in TypeScript, con un supporto significativamente migliorato nella Composition API.
• NestJS: Il principale framework backend per Node.js, costruito interamente in TypeScript.

La tendenza e chiara. Scegliere JavaScript rispetto a TypeScript per un nuovo progetto nel 2021 significa nuotare controcorrente rispetto all'intero ecosistema.

Quando NON usare TypeScript

• Prototipi rapidi e script usa-e-getta: Se state scrivendo uno script di migrazione dati una tantum, l'overhead di setup di TypeScript non ne vale la pena.
• Progetti molto piccoli: Uno script utility in un singolo file non beneficia molto di un sistema di tipi.
• Team senza esperienza TypeScript e scadenze strette: Se il vostro team non ha mai usato TypeScript e avete un lancio il mese prossimo, non e il momento di introdurlo.
• Codice fortemente dinamico: Alcuni pattern in JavaScript sono difficili da tipizzare correttamente. Finite a lottare contro il sistema dei tipi piu che a beneficiarne.

Per qualsiasi progetto che sara mantenuto per piu di qualche mese, su cui lavorera piu di uno sviluppatore, o che gestisce logica di business complessa, TypeScript e la scelta migliore.

Migrare da JavaScript a TypeScript

Non dovete riscrivere tutto il progetto. TypeScript supporta l'adozione incrementale:

Fase 1: Aggiungere TypeScript al progetto

1. Installare TypeScript: npm install --save-dev typescript
2. Creare un tsconfig.json con "allowJs": true e "strict": false
3. Rinominare un file da .js a .ts e correggere eventuali errori

Fase 2: Migrazione graduale

1. Rinominare i file da .js a .ts uno alla volta
2. Aggiungere annotazioni di tipo alle firme delle funzioni
3. Creare interfacce per i vostri modelli di dati principali
4. Installare pacchetti @types per le vostre dipendenze

Fase 3: Abilitare la modalita strict

1. Abilitare i controlli rigorosi uno alla volta
2. Iniziare con "noImplicitAny": true
3. Poi "strictNullChecks": true
4. Puntare al pieno "strict": true

Guadagni reali di produttivita

Gli argomenti a favore di TypeScript non sono teorici. Ecco i miglioramenti di produttivita che abbiamo visto nei nostri progetti e nel lavoro con i clienti:

• 50-70% meno bug legati ai tipi: Bug come nomi di proprieta sbagliati, errori di riferimento null e sorprese nella coercizione dei tipi vengono intercettati prima che il codice raggiunga il testing.
• Onboarding piu veloce: I nuovi sviluppatori su un progetto capiscono le strutture dati e i contratti delle funzioni attraverso i tipi.
• Refactoring sicuro: Refactoring su larga scala che richiederebbe giorni di test manuale in JavaScript richiede ore con TypeScript.
• Migliore integrazione API: Quando si consumano API di terze parti, le definizioni dei tipi rendono chiaro esattamente quali dati sono disponibili e in quale formato.

L'investimento iniziale nell'imparare e configurare TypeScript si ripaga entro settimane su qualsiasi progetto non banale. Per i progetti di sviluppo web a Lugano e in tutta la Svizzera, dove i budget di sviluppo sono reali e il tempo perso costa denaro, TypeScript e uno degli investimenti con il ritorno piu alto che un team possa fare.

Se state considerando TypeScript per un nuovo progetto o la migrazione di uno esistente, contattateci. Costruiamo applicazioni web con TypeScript per aziende in tutto il Ticino e la Svizzera.