TypeScript #11: Utility Types (Els teus millors amics)

TypeScript ve amb una “navalla suïssa” de tipus predefinits anomenats Utility Types. Són Generics que prenen un tipus i ens retornen una versió modificada.

Partial<T> (Tot opcional)

Imaginem que tenim un usuari complet, però per a una actualització (PATCH), només enviem els camps que han canviat.

interface Usuari {
  id: number;
  nom: string;
  email: string;
}

function actualitzarUsuari(id: number, canvis: Partial<Usuari>) {
  // 'canvis' ara és com si totes les props tinguessin '?'
  // { id?: number; nom?: string; email?: string; }
  ...
}

actualitzarUsuari(1, { nom: "Alice" }); // ✅ Vàlid

interface Usuari {
  id: number;
  nom: string;
  email: string;
}

function actualitzarUsuari(id: number, canvis: Partial<Usuari>) {
  // 'canvis' ara és com si totes les props tinguessin '?'
  // { id?: number; nom?: string; email?: string; }
  ...
}

actualitzarUsuari(1, { nom: "Alice" }); // ✅ Vàlid

Required<T> (Tot obligatori)

El contrari a Partial. Treu tots els ? d’una interfície.

Pick<T, Keys> (Tria el que vols)

A vegades tenim una interfície gegant i només necessitem un parell de camps per a un component petit.

interface Producte {
  id: number;
  nom: string;
  preu: number;
  descripcio: string;
  stock: number;
  ...
}

// Creem un nou tipus només amb nom i preu
type EtiquetaProducte = Pick<Producte, "nom" | "preu">;
// { nom: string; preu: number; }

interface Producte {
  id: number;
  nom: string;
  preu: number;
  descripcio: string;
  stock: number;
  ...
}

// Creem un nou tipus només amb nom i preu
type EtiquetaProducte = Pick<Producte, "nom" | "preu">;
// { nom: string; preu: number; }

Omit<T, Keys> (Treu el que NO vols)

El contrari a Pick. Elimina camps específics. Molt útil per treure dades sensibles o innecessàries.

// Un Usuari sense la contrasenya
type UsuariPublic = Omit<Usuari, "password">;

// Un Usuari sense la contrasenya
type UsuariPublic = Omit<Usuari, "password">;

Record<Keys, Type> (Diccionaris)

Aquest és un mica especial. Serveix per crear objectes on no sabem el nom de les propietats, però sabem quins valors tindran.

Pensa en una Agenda Telefònica:

• Les Claus (Keys) són noms (Strings).
• Els Valors (Type) són números (Numbers).

No sabem si guardaràs a “Pepe” o “Maria”, però sabem que l’estructura sempre serà Nom -> Numero.

// Un objecte normal requereix saber les claus per endavant
// interface Agenda { pepe: number } // ❌ Poc pràctic

// Amb Record:
const agenda: Record<string, number> = {};

agenda["Pepe"] = 123456;
agenda["Maria"] = 987654;

// Un objecte normal requereix saber les claus per endavant
// interface Agenda { pepe: number } // ❌ Poc pràctic

// Amb Record:
const agenda: Record<string, number> = {};

agenda["Pepe"] = 123456;
agenda["Maria"] = 987654;

Som-hi!

1. Crea TodoUpdate usant Partial de Todo.
2. Crea TodoPreview usant Pick de Todo (només title i completed).
3. Crea TodoDictionary que sigui un Record on la clau és string i el valor és Todo.