Què és TypeScript? Guia en llenguatge senzill per a no programadors

TypeScript és JavaScript amb tipus. Hi afegeixes etiquetes que indiquen quin tipus de dada ha de ser cada valor —un número, un text, una llista de comandes— i TypeScript comprova el codi per detectar incompatibilitats abans que s'executi. El lloc de TypeScript el descriu com a «JavaScript amb sintaxi per a tipus»; els tipus s'eliminen quan el codi es converteix en JavaScript normal, que després s'executa allà on s'executa JavaScript.

Per què importa quan construeixes amb IA

Els models d'IA escriuen codi ràpidament, i el codi ràpid té errors: un camp que es diu customerName en un fitxer i customer_name en un altre, un preu passat com a text en lloc de número, una funció cridada amb un valor que falta. En JavaScript normal, molts d'aquests errors només apareixen quan algú prem el botó equivocat.

TypeScript en detecta molts abans, mentre s'escriu el codi:

• La IA rep retroalimentació immediata. Els errors de tipus assenyalen la línia exacta que és incorrecta, de manera que l'agent la pot corregir abans que tu la vegis.
• Els canvis són més segurs. Si canvies el nom d'un camp, TypeScript marca cada lloc que encara fa servir el nom antic.
• El codi s'explica a si mateix. Els tipus documenten què espera i què retorna una funció, cosa que t'ajuda a tu, a la IA i a qualsevol desenvolupador que hi treballi després.
• Els editors són més intel·ligents. L'autocompletat i «anar a la definició» funcionen millor perquè l'editor sap quin és cada valor.

Aquest és un motiu important pel qual molts constructors d'apps d'IA fan servir TypeScript per defecte.

Una analogia quotidiana

Pensa en un magatzem de dipòsit amb compartiments etiquetats. Cada compartiment té un cartell: «Només palets», «Refrigerat», «Màxim 500 kg». Quan arriba una entrega, un controlador a la porta compara la mercaderia amb el cartell. El peix congelat destinat al compartiment de productes secs es para a la porta, i no es descobreix una setmana després, quan fa mala olor.

TypeScript és el controlador de la porta. Els tipus són els cartells. La comprovació es fa abans que la mercaderia —el teu codi— entri en ús. I, un cop tot està al seu lloc, els cartells es retiren: el JavaScript en execució ja no conté tipus.

Com funciona TypeScript

1. Tu (o la IA) escrius fitxers .ts o .tsx: TypeScript, amb etiquetes de tipus.
2. El comprovador de tipus llegeix el codi i informa de les incompatibilitats com a errors a l'editor o a la compilació.
3. Un pas de compilació elimina els tipus, produint JavaScript normal.
4. El JavaScript s'executa al navegador o en un servidor (Node.js, Deno, Bun).

Una conseqüència important: TypeScript comprova el codi que has escrit, no les dades que arriben mentre l'app s'executa. Si una API externa retorna alguna cosa inesperada, TypeScript no ho pot veure tret que afegeixis validació en execució.

Un exemple pràctic: un formulari de reserves

Imagina que estàs construint una app de reserves per a una perruqueria. Aquí tens un tipus que descriu una reserva:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

I una funció que calcula una paga i senyal:

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

Ara mira què detecta TypeScript.

Un camp mal escrit.

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

TypeScript informa que prise no és una propietat coneguda i que falta price. En JavaScript normal, això calcularia silenciosament una paga i senyal de NaN (no és un número).

El tipus de valor equivocat.

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

TypeScript informa que un text no es pot fer servir on s'espera un número. Sense això, "40" * 0.2 funciona per casualitat, però "40" + 5 dona "405": el tipus d'error que apareix en una factura.

Un servei que no existeix.

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

TypeScript informa que "perm" no és un dels serveis permesos. Quan la perruqueria afegeixi permanents més endavant, n'afegiràs un al tipus, i TypeScript mostrarà cada lloc que cal actualitzar: la llista de preus, el formulari, els colors del calendari.

El que no pot detectar. Si el formulari de reserves envia price: "40" des del navegador al servidor, TypeScript del servidor no ho veu en execució. Per això les apps ben fetes també validen les dades que arriben, sovint amb una biblioteca de validació que comprova l'estructura i la converteix en un Booking correcte.

TypeScript contra JavaScript

Termes comuns explicats

Errors comuns i idees equivocades

• «TypeScript fa que el codi estigui lliure d'errors.» Detecta incompatibilitats en l'estructura de les dades, no lògica incorrecta. Una paga i senyal del 2% en lloc del 20% passa la comprovació de tipus sense cap problema.
• «Els tipus em protegeixen d'entrades dolentes.» Els tipus desapareixen en execució. Valida les dades dels usuaris, els formularis i les APIs.
• any a tot arreu. Quan una IA està encallada, pot recórrer a any o a // @ts-ignore per silenciar els errors. Això amaga els problemes en lloc d'arreglar-los.
• Ignorar els errors de tipus perquè la vista prèvia funciona. Algunes eines encara executen codi amb errors de tipus. Els errors són encara errors que poden esdevenir problemes.
• «TypeScript és més lent.» Els tipus s'eliminen abans d'executar-se; el JavaScript que s'executa és essencialment el mateix.
• «És només per a equips grans.» Els constructors individuals també se'n beneficien, sobretot quan una IA fa la majoria de les edicions.

Què demanar al teu constructor d'IA

• «Fes servir TypeScript amb el mode estricte activat.»
• «Defineix tipus compartits per als nostres registres principals —Customer, Booking, Invoice— i fes-los servir tant al frontend com al backend.»
• «No facis servir any ni @ts-ignore per superar errors; corregeix el problema de fons i explica'm quin era.»
• «Valida totes les dades que arriben al servidor, no només amb tipus.»
• «Executa el comprovador de tipus i corregeix tots els errors abans de dir-me que està fet.»
• «Quan canviïs el nom d'un camp, actualitza cada lloc que TypeScript marqui.»
• «Explica aquest error de tipus en llenguatge senzill.»

Per saber més sobre com revisar el que ha produït la IA, consulta com revisar el codi generat per IA i com depurar una app construïda amb IA.

TypeScript a Mythex

Quan no demanes res en concret, Mythex comença els projectes nous amb Vite + React + TypeScript + Tailwind. L'editor de codi inclou intel·ligència de llenguatge —completat, diagnòstics i anar a la definició per a TypeScript i JavaScript, entre altres llenguatges—, de manera que els errors de tipus són visibles al codi i no només a la vista prèvia. L'editor és només de lectura al pla Free i totalment editable al Pro. Encara pots demanar una configuració diferent al teu primer prompt; la pàgina de documentació sobre com es tria la tecnologia n'explica el procés, i els documents de l'editor de codi expliquen què mostra l'editor.

Preguntes