Cos'è TypeScript? Guida semplice per non sviluppatori

TypeScript è JavaScript con i tipi. Aggiungi etichette che dicono che tipo di dato deve essere ogni valore — un numero, un testo, una lista di ordini — e TypeScript controlla il codice alla ricerca di incongruenze prima ancora che venga eseguito. Il sito di TypeScript lo descrive come «JavaScript con sintassi per i tipi»; i tipi vengono eliminati quando il codice viene convertito in normale JavaScript, che poi gira ovunque giri JavaScript.

Perché conta quando costruisci con l'AI

I modelli AI scrivono codice velocemente, e il codice veloce contiene errori: un campo chiamato customerName in un file e customer_name in un altro, un prezzo passato come testo invece che come numero, una funzione chiamata senza un valore. In JavaScript semplice, molti di questi errori emergono solo quando qualcuno clicca il pulsante sbagliato.

TypeScript ne intercetta molti prima, mentre il codice viene scritto:

• L'AI riceve un feedback immediato. Gli errori di tipo indicano la riga esatta sbagliata, così l'agente può correggerla prima che tu la veda.
• Le modifiche sono più sicure. Rinomini un campo e TypeScript segnala ogni punto che usa ancora il vecchio nome.
• Il codice si spiega da solo. I tipi documentano che cosa si aspetta e restituisce una funzione, il che aiuta te, l'AI e qualsiasi sviluppatore che ci lavorerà in seguito.
• Gli editor diventano più intelligenti. L'autocompletamento e «vai alla definizione» funzionano meglio perché l'editor sa che tipo è ogni valore.

Questo è uno dei motivi principali per cui molti builder di app AI usano TypeScript di default.

Un'analogia quotidiana

Pensa a un magazzino di spedizioni con scomparti etichettati. Ogni scomparto ha un cartello: «Solo pallet», «Refrigerato», «Max 500 kg». Quando arriva una consegna, un controllore alla porta confronta la merce con il cartello. Il pesce surgelato destinato allo scomparto dei prodotti secchi viene fermato alla porta, non scoperto una settimana dopo quando puzza.

TypeScript è il controllore alla porta. I tipi sono i cartelli. Il controllo avviene prima che la merce — il tuo codice — venga messa in uso. E una volta che tutto è al suo posto, i cartelli vengono tolti: il JavaScript in esecuzione non ha più tipi.

Come funziona TypeScript

1. Tu (o l'AI) scrivi file .ts o .tsx — TypeScript, con le etichette dei tipi.
2. Il controllore dei tipi legge il codice e segnala le incongruenze come errori nell'editor o nella build.
3. Un passaggio di build rimuove i tipi, producendo normale JavaScript.
4. Il JavaScript viene eseguito nel browser o su un server (Node.js, Deno, Bun).

Una conseguenza importante: TypeScript controlla il codice che hai scritto, non i dati che arrivano mentre l'app è in funzione. Se un'API esterna restituisce qualcosa di inatteso, TypeScript non può vederlo a meno che tu non aggiunga una validazione a runtime.

Un esempio concreto: un modulo di prenotazione

Immagina di costruire un'app di prenotazioni per un salone di parrucchiere. Ecco un tipo che descrive una prenotazione:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // il ? indica che è facoltativo
};

E una funzione che calcola un acconto:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Ora guarda cosa intercetta TypeScript.

Un campo scritto male.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript segnala che prise non è una proprietà conosciuta e che manca price. In JavaScript semplice questo calcolerebbe in silenzio un acconto di NaN (non è un numero).

Il tipo di valore sbagliato.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript segnala che una stringa non può essere usata dove ci si aspetta un numero. Senza di esso, "40" * 0.2 funziona per caso, ma "40" + 5 dà "405" — il tipo di bug che compare su una fattura.

Un servizio che non esiste.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript segnala che "perm" non è uno dei servizi consentiti. Quando il salone aggiungerà le permanenti, le inserirai nel tipo, e TypeScript mostrerà ogni punto che dovrà essere aggiornato — il listino prezzi, il modulo, i colori del calendario.

Cosa non può intercettare. Se il modulo di prenotazione invia price: "40" dal browser al server, TypeScript sul server non lo vede a runtime. Per questo le app ben costruite validano anche i dati in arrivo, spesso con una libreria di validazione che controlla la forma e la trasforma in un Booking vero.

TypeScript vs JavaScript

Termini comuni spiegati

Errori comuni e idee sbagliate

• «TypeScript rende il codice privo di bug.» Intercetta incongruenze nella forma dei dati, non la logica sbagliata. Un acconto del 2% invece del 20% supera il controllo dei tipi senza problemi.
• «I tipi mi proteggono dagli input errati.» I tipi scompaiono a runtime. Valida i dati provenienti da utenti, moduli e API.
• any ovunque. Quando un'AI è in difficoltà, può ricorrere a any o // @ts-ignore per zittire gli errori. Questo nasconde i problemi invece di risolverli.
• Ignorare gli errori di tipo perché l'anteprima funziona. Alcuni strumenti eseguono comunque codice con errori di tipo. Quegli errori sono bug in attesa di manifestarsi.
• «TypeScript è più lento.» I tipi vengono rimossi prima dell'esecuzione; il JavaScript che gira è sostanzialmente lo stesso.
• «È solo per grandi team.» Anche chi lavora da solo ne trae vantaggio, soprattutto quando un'AI fa la maggior parte delle modifiche.

Cosa chiedere al tuo builder AI

• «Usa TypeScript con la modalità strict attiva.»
• «Definisci tipi condivisi per i nostri record principali — Customer, Booking, Invoice — e usali sia nel frontend sia nel backend.»
• «Non usare any o @ts-ignore per superare gli errori; risolvi il problema di fondo e dimmi qual era.»
• «Valida tutti i dati in arrivo sul server, non solo con i tipi.»
• «Esegui il controllore dei tipi e correggi ogni errore prima di dirmi che è fatto.»
• «Quando rinomini un campo, aggiorna ogni punto che TypeScript segnala.»
• «Spiegami questo errore di tipo in parole semplici.»

Per verificare ciò che ha prodotto l'AI, vedi come rivedere il codice generato dall'AI e come fare debug di un'app creata con l'AI.

TypeScript in Mythex

Se non chiedi nulla di specifico, Mythex avvia i nuovi progetti su Vite + React + TypeScript + Tailwind. L'editor del codice include l'intelligenza del linguaggio — completamenti, diagnostica e vai-alla-definizione per TypeScript e JavaScript, tra gli altri linguaggi — quindi gli errori di tipo sono visibili nel codice, non solo nell'anteprima. L'editor è in sola lettura nel piano Free e completamente modificabile nel piano Pro. Puoi comunque chiedere una configurazione diversa nel primo prompt; la pagina della documentazione su come viene scelta la tecnologia spiega come, e la documentazione dell'editor del codice descrive cosa mostra l'editor.

Domande