TypeScript Academy · Lección

El operador de tipos keyof

Obtenga con keyof una unión de las claves de un tipo de objeto.

El operador de tipos keyof es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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.

Las claves de un tipo

El operador keyof toma un tipo de objeto y produce una unión de sus claves de propiedad. Es la base del acceso seguro a propiedades y de las utilidades genéricas para trabajar con claves.

keyof básico

Aplique keyof a una interfaz para obtener una unión de sus nombres de clave como tipos literales de cadena.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Solo se permiten claves válidas

Una variable con el tipo keyof T solo puede contener una de las claves reales de T. Los errores tipográficos y las claves no válidas se detectan en tiempo de compilación.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof con typeof

Combine keyof con typeof para obtener las claves del tipo inferido de un valor. Aquí obtenemos las claves de un objeto de configuración sin escribir una interfaz.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof de una firma de índice de tipo string

Para un tipo con una firma de índice de tipo string, keyof es string | number, porque se permite cualquier clave de cadena y las claves numéricas se convierten en cadenas.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof de una firma de índice de tipo number

Para una firma de índice de tipo number, keyof es simplemente number. Esto coincide con la forma en que los arrays exponen índices numéricos.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof de un tipo array

Aplicar keyof a un tipo array produce una unión sorprendente: índices numéricos y todos los nombres de métodos y propiedades del array, como length y push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Iterar sobre claves de forma segura

Use keyof para escribir bucles que solo accedan a claves válidas. Convertir Object.keys a (keyof T)[] mantiene la seguridad de tipos en el acceso indexado.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof en restricciones genéricas

Un parámetro genérico para una clave suele restringirse con K extends keyof T. Esto garantiza que la clave exista realmente en el objeto.

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

Combinar varias claves

Como keyof T es una unión, puede intersectarla o filtrarla. Aquí, una función acepta un array de claves válidas.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Por qué es importante keyof

keyof convierte los nombres de propiedad en un tipo que se puede comprobar, lo que permite crear getters, setters y mapeadores genéricos que no pueden hacer referencia a una clave inexistente. Es omnipresente en TypeScript avanzado.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Comprobación rápida

Compruebe cuánto entiende el operador keyof.

Repaso

keyof T produce una unión de las claves de propiedad de T como tipos literales y restringe las variables a claves válidas. Devuelve string | number para firmas de índice de tipo string y number para firmas de índice de tipo number. Combinado con typeof, permite derivar claves a partir de valores; combinado con genéricos (K extends keyof T), permite crear getters, selectores e iteraciones con seguridad de tipos.

Preguntas frecuentes

¿La lección «El operador de tipos keyof» es gratis?

Sí — el texto completo de «El operador de tipos 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 «El operador de tipos keyof»?

Obtenga con keyof una unión de las claves de un tipo de objeto. 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 2 de 4.

¿Cuánto tiempo toma la lección «El operador de tipos 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