TypeScript #5: La Màgia de typeof i keyof

Aquí és on TypeScript deixa de ser “JavaScript amb tipus” i es converteix en un superpoder. Fins ara hem definit tipus manualment. Però, i si poguéssim generar els tipus automàticament des del nostre codi?

typeof: Extraient l’ADN

A JS, typeof retorna un string (“string”, “number”, “object”). A TS, si l’usem en un context de tipus, retorna el tipus complet.

const settings = {
  theme: "dark",
  notifications: true,
  version: 1.0
};

// En lloc d'escriure la interfície manualment...
// type Settings = { theme: string; notifications: boolean; version: number }; 😴

type Settings = typeof settings; 
// 🪄 Boom! TS acaba d'escriure la interfície per tu.

const settings = {
  theme: "dark",
  notifications: true,
  version: 1.0
};

// En lloc d'escriure la interfície manualment...
// type Settings = { theme: string; notifications: boolean; version: number }; 😴

type Settings = typeof settings; 
// 🪄 Boom! TS acaba d'escriure la interfície per tu.

Això és brutal per a APIs o llibreries de tercers (o les nostres pròpies constants de configuració). Tenim una “Single Source of Truth” (Font Única de Veritat): el valor. El tipus s’adapta sol.

keyof: Dona’m les claus

keyof pren un Tipus i ens retorna una Unió de les seves claus (keys).

interface Usuari {
  name: string;
  age: number;
  email: string;
}

type UsuariKeys = keyof Usuari;
// És equivalent a: "name" | "age" | "email"

interface Usuari {
  name: string;
  age: number;
  email: string;
}

type UsuariKeys = keyof Usuari;
// És equivalent a: "name" | "age" | "email"

Per a què serveix? Perquè no puguem demanar propietats que no existeixen.

function getProperty(user: Usuari, key: keyof Usuari) {
  return user[key];
}

const me: Usuari = { name: "Alice", age: 39, email: "..." };

getProperty(me, "name"); // ✅
getProperty(me, "password"); // ❌ Error: Argument of type '"password"' is not assignable...

function getProperty(user: Usuari, key: keyof Usuari) {
  return user[key];
}

const me: Usuari = { name: "Alice", age: 39, email: "..." };

getProperty(me, "name"); // ✅
getProperty(me, "password"); // ❌ Error: Argument of type '"password"' is not assignable...

El Combo Definitiu: keyof typeof

Aquesta és una de les combinacions més usades en TypeScript real. S’usa quan volem treure les keys d’un objecte/valor que ja existeix (no d’una interfície).

1. typeof objecte -> Ens dona el Tipus de l’objecte.
2. keyof (Tipus) -> Ens dona les keys d’aquest Tipus.

const COLORS = {
  vermell: "#FF0000",
  verd: "#00FF00",
  blau: "#0000FF"
};

type ColorName = keyof typeof COLORS;
// "vermell" | "verd" | "blau"

function paint(color: ColorName) { ... }

paint("vermell"); // ✅
paint("groc"); // ❌ Error

const COLORS = {
  vermell: "#FF0000",
  verd: "#00FF00",
  blau: "#0000FF"
};

type ColorName = keyof typeof COLORS;
// "vermell" | "verd" | "blau"

function paint(color: ColorName) { ... }

paint("vermell"); // ✅
paint("groc"); // ❌ Error

Provem-ho!

Usem l’editor. Creem un objecte config amb diverses opcions. Usem typeof per treure el seu tipus i creem una funció que rebi aquest tipus.

A la Part 6 veurem els Generics, l’eina que ens permet crear components i funcions reutilitzables que funcionen amb qualsevol tipus (el famós <T>).