TypeScript #2: Tipus Literals i Unions

A la Part 1 vam veure que const crea tipus literals. Si escrius const rol = "admin", per a TypeScript rol no és un simple string, sinó que és específicament "admin".

Avui veurem com utilitzar això per crear codi a prova de bales.

String vs. String Literal

Imagina que tens una funció per pintar un botó.

function pintarBoto(color: string) {
  if (color === 'vermll') { // ❌ Ups, error de dit ("vermll" en lloc de "vermell")
      return '🔴';
  }
  return '🔵';
}

pintarBoto("blau"); // ✅ Bé
pintarBoto("patata 🥔"); // ✅ Bé (però no hauria, patata no és un color!)

function pintarBoto(color: string) {
  if (color === 'vermll') { // ❌ Ups, error de dit ("vermll" en lloc de "vermell")
      return '🔴';
  }
  return '🔵';
}

pintarBoto("blau"); // ✅ Bé
pintarBoto("patata 🥔"); // ✅ Bé (però no hauria, patata no és un color!)

El problema aquí és que string és massa ampli. Admet “blau”, “vermell”, i també “patata 🥔” o “asdfg”.

La Unió de Tipus

Aquí és on entra l’operador | (pipe). Es llegeix com “O”. Podem dir-li a TypeScript: “El color només pot ser ‘vermell’ O ‘blau’ O ‘verd’”.

type ColorBoto = "vermell" | "blau" | "verd";

function pintarBoto(color: ColorBoto) {
  // ...
}

pintarBoto("vermell");   // ✅ Perfecte
pintarBoto("verd");  // ✅ Perfecte
pintarBoto("patata 🥔");
// ❌ Error: Argument of type '"patata 🥔"' is not assignable to parameter of type 'ColorBoto'.

type ColorBoto = "vermell" | "blau" | "verd";

function pintarBoto(color: ColorBoto) {
  // ...
}

pintarBoto("vermell");   // ✅ Perfecte
pintarBoto("verd");  // ✅ Perfecte
pintarBoto("patata 🥔");
// ❌ Error: Argument of type '"patata 🥔"' is not assignable to parameter of type 'ColorBoto'.

Bum! 💥 Acabes d’eliminar una categoria sencera de bugs. Ja ningú pot passar una cadena incorrecta a la teva funció.

L’Autocompletat (IntelliSense)

El millor d’això no és només la seguretat, és l’experiència de desenvolupament.

Prova-ho tu mateix: Posa’t entre les cometes i prem Ctrl + Espai a cadascuna. A la primera no hi ha suggeriments (és un string genèric). A la segona l’editor et suggereix les opcions vàlides.

No has d’anar a la documentació per saber quins valors acceptava. El propi tipus et diu quins valors accepta.

Unions Mixtes

Pots barrejar tipus si vols (encara que utilitza-ho amb cap):

// Un ID pot ser un número (ID de base de dades) o un string (UUID)
type ID = number | string;

function buscarUsuari(id: ID) {
  console.log("Buscant usuari amb ID:", id);
}

buscarUsuari(123); // ✅
buscarUsuari("abc-123"); // ✅

// Un ID pot ser un número (ID de base de dades) o un string (UUID)
type ID = number | string;

function buscarUsuari(id: ID) {
  console.log("Buscant usuari amb ID:", id);
}

buscarUsuari(123); // ✅
buscarUsuari("abc-123"); // ✅

Resum

• Tipus Literals: Valors exactes ("vermell", 1).
• Unions (|): Combinar tipus (A | B vol dir A o B).
• Utilitza-ho per evitar “Magic Strings” i guanyar autocompletat gratis.

A la propera part veurem com Tipar Objectes i Interfícies per deixar de passar objectes anònims sense control per la nostra aplicació.