Indexed access types en TypeScript: T[K], T[number] y más

Un indexed access type busca el tipo de una propiedad en otro tipo, con la misma sintaxis de corchetes que JavaScript usa para acceder a propiedades. Person["age"] es number, y Person["address"]["city"] es string.

type Person = {
  name: string;
  age: number;
  address: { city: string; zip: string };
};

type Age = Person["age"];                 // number
type City = Person["address"]["city"];    // string
type Address = Person["address"];         // { city: string; zip: string }

const age: Age = 36;
const home: Address = { city: "London", zip: "N1" };
const city: City = home.city;

console.log(age, city); // 36 London

La ventaja es tener una única fuente de verdad. Age no es una segunda copia de number: si Person["age"] pasa a ser string, todos los tipos escritos como Person["age"] cambian con él. Los indexed access types solo existen en compilación; no generan JavaScript.

Claves en unión y T[keyof T]

El índice puede ser una unión de claves. El resultado es la unión de los tipos de esas propiedades:

type Product = {
  id: number;
  title: string;
  inStock: boolean;
};

type IdOrTitle = Product["id" | "title"];  // number | string
type AnyValue = Product[keyof Product];    // number | string | boolean

function describe(value: AnyValue): string {
  return `${typeof value}: ${value}`;
}

const p: Product = { id: 7, title: "Lamp", inStock: false };
for (const key of ["id", "title", "inStock"] as const) {
  console.log(describe(p[key]));
}
// number: 7
// string: Lamp
// boolean: false

Product[keyof Product] es la forma de decir a nivel de tipos «cualquier valor de propiedad de Product». Pedir una clave que no existe es un error de compilación: Product["price"] da error TS2339: Property 'price' does not exist on type 'Product'.

Las propiedades opcionales incluyen undefined

Con strictNullChecks (activado con strict), el tipo de una propiedad opcional incluye undefined, y también su indexed access type:

type Profile = { name: string; nickname?: string };

type Nick = Profile["nickname"]; // string | undefined

Para quitar el undefined, envuélvelo: NonNullable<Profile["nickname"]> es string.

El tipo de los elementos de un array con T[number]

Los arrays se indexan con números, así que indexar un tipo array con number da el tipo de sus elementos. También funciona a través de varios niveles:

type Order = {
  id: number;
  items: { sku: string; qty: number }[];
};

type Orders = Order[];

type OneOrder = Orders[number];             // Order
type Item = Order["items"][number];         // { sku: string; qty: number }
type Sku = Orders[number]["items"][number]["sku"]; // string

const item: Item = { sku: "A-100", qty: 2 };
const sku: Sku = item.sku;
console.log(sku, item.qty); // A-100 2

Es útil cuando un tipo viene de algo que no controlas, como un cliente de API generado: ApiResponse["data"]["users"][number] nombra el tipo del usuario sin que nadie lo haya exportado.

Tuplas: indexar por posición

Un tipo tupla se puede indexar con una posición concreta, con number para la unión de todos los tipos de sus elementos, y con "length" para su longitud como tipo literal:

type Entry = [string, number, boolean];

type First = Entry[0];         // string
type Second = Entry[1];        // number
type AnyElement = Entry[number]; // string | number | boolean
type Len = Entry["length"];    // 3

const len: Len = 3;
const entry: Entry = ["ada", 36, true];
const first: First = entry[0];

console.log(first, len); // ada 3
// Entry[3] is error TS2493: Tuple type 'Entry' of length '3' has no element at index '3'.

(typeof arr)[number]: una unión a partir de un array const

El uso más habitual en proyectos reales: guardar una lista de valores permitidos como array (para recorrerla en ejecución) y derivar de ella el tipo unión (para que el compilador lo compruebe).

const ROLES = ["admin", "editor", "viewer"] as const;

type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

function canPublish(role: Role): boolean {
  return role !== "viewer";
}

for (const role of ROLES) {
  console.log(role, canPublish(role));
}
// admin true
// editor true
// viewer false

Funciona gracias a dos piezas. as const convierte el array en una tupla readonly de tipos literales; sin él, ROLES es string[] y (typeof ROLES)[number] es solo string. Después, typeof convierte el valor en un tipo, y [number] junta sus elementos en una unión. Los paréntesis son opcionales (typeof ROLES[number] significa lo mismo), pero dejan claro el orden de las operaciones.

Comprobar un string contra el array

Esa tupla readonly tiene una sorpresa. Su método includes solo acepta el tipo de sus elementos, así que no le puedes pasar un string cualquiera:

// This does not compile: includes() on the tuple only accepts a Role
const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];

function isRole(value: string): boolean {
  return ROLES.includes(value);
}

console.log(isRole("admin"));

index.ts(6,25): error TS2345: Argument of type 'string' is not assignable to parameter of type '"admin" | "editor" | "viewer"'.

Amplía el array a readonly string[] para la comprobación, y convierte la función en un type guard para que una comprobación correcta reduzca el tipo del valor:

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];

function isRole(value: string): value is Role {
  return (ROLES as readonly string[]).includes(value);
}

const input: string = "editor"; // imagine this came from a URL or a form
if (isRole(input)) {
  const role: Role = input; // narrowed to Role here
  console.log("valid role:", role);
}
console.log(isRole("owner")); // false

Con este patrón tienes una sola lista para las dos tareas: la comprobación en ejecución usa el array y el tipo se deriva de él, así que no pueden desincronizarse.

Indexed access en genéricos: T[K]

Dentro de un genérico, T[K] con K extends keyof T es el tipo de la propiedad que haya elegido quien llama:

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

const users = [
  { name: "Ada", age: 36 },
  { name: "Linus", age: 28 },
];

const names = pluck(users, "name"); // string[]
const ages = pluck(users, "age");   // number[]

La restricción K extends keyof T es lo que hace válido T[K]. Sin ella, TypeScript no puede saber que K es una clave de T e informa error TS2536: Type 'K' cannot be used to index type 'T'.

Sintaxis de un vistazo

El índice siempre es un tipo. Person[key], donde key es una variable const, falla con dos errores: error TS2538: Type 'key' cannot be used as an index type. y error TS2749: 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?.