TypeScript Academy · Lección

Combinación de typeof y keyof

Derive tipos precisos encadenando operadores de tipos.

Combinación de typeof y keyof es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

La combinación clave

Por separado, typeof deriva un tipo a partir de un valor y keyof enumera las claves de un tipo. Juntos — keyof typeof value — producen una unión de las claves reales de un valor, lo que permite acceder a él con total seguridad de tipos.

keyof typeof en acción

Comience con un objeto const, capture su tipo con typeof y, después, enumere sus claves con keyof. El resultado es una unión de los nombres literales de las claves del objeto.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Por qué existe este patrón

A menudo dispone de un objeto en tiempo de ejecución, pero no de una interfaz independiente. keyof typeof le proporciona un tipo de claves sin duplicar la forma del objeto en un tipo escrito manualmente.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Acceso seguro por clave

Un parámetro de función cuyo tipo es keyof typeof obj rechaza las claves no válidas en tiempo de compilación, por lo que el acceso indexado dentro de la función es seguro.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Objetos constantes similares a enumeraciones

Un modismo habitual consiste en definir un objeto as const como una pseudoenumeración y derivar de él tanto los tipos de sus claves como los de sus valores.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Claves frente a valores

Observe la diferencia: keyof typeof obj proporciona los nombres de las claves, mientras que typeof obj[keyof typeof obj] proporciona los tipos de los valores. Elija el que necesite su API.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

getProperty genérico

El getter clásico con seguridad de tipos restringe un parámetro de clave mediante K extends keyof T y devuelve T[K], por lo que el tipo del resultado coincide exactamente con el de la propiedad consultada.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

El tipo de retorno sigue a la clave

Como el retorno es T[K], el tipo del resultado de cada llamada se adapta a la clave específica proporcionada: un número para una clave y una cadena para otra.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Las claves no válidas se rechazan

Pasar una clave que no existe en el objeto produce un error de compilación. La restricción genérica lo impone antes de que el código llegue a ejecutarse.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Un setter con seguridad de tipos

El mismo mecanismo permite crear un setter: el parámetro de valor es T[K], por lo que solo puede asignar un valor del tipo correcto para esa clave.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Cómo unirlo todo

El patrón keyof typeof junto con el acceso genérico T[K] proporciona utilidades seguras y reutilizables para trabajar con objetos reales: la base de lectores de configuración tipados, consultas y helpers para formularios.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Comprobación rápida

Compruebe su comprensión de la combinación de typeof y keyof.

Resumen

keyof typeof value deriva una unión de las claves reales de un valor sin escribir una interfaz independiente, lo que hace que el acceso indexado sea seguro. Distinga los tipos de claves (keyof typeof obj) de los tipos de valores (typeof obj[keyof typeof obj]). El patrón genérico getProperty<T, K extends keyof T>(obj, key): T[K] devuelve exactamente el tipo consultado y rechaza las claves no válidas en tiempo de compilación.

Preguntas frecuentes

¿La lección «Combinación de typeof y keyof» es gratis?

Sí — el texto completo de «Combinación de typeof y keyof» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Combinación de typeof y keyof»?

Derive tipos precisos encadenando operadores de tipos. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Combinación de typeof y keyof»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a TypeScript Academy