TypeScript Academy · Lección

El operador de tipos typeof

Capture el tipo de un valor en tiempo de ejecución con typeof.

Lección 1 de 413 pasos

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

Tipos a partir de valores

El operador de tipos typeof deriva un tipo estático a partir de un valor en tiempo de ejecución. Permite escribir un valor una sola vez y reutilizar su estructura como tipo, manteniendo ambos perfectamente sincronizados.

Dos usos diferentes de typeof

No los confunda: el typeof de JavaScript devuelve una cadena en tiempo de ejecución; el typeof de TypeScript aparece en una posición de tipo y produce un tipo. La misma palabra clave, pero en contextos distintos.

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

Capturar el tipo de una variable

Coloque typeof delante de un valor en una anotación de tipo para capturar el tipo inferido de ese valor. Aquí, T se convierte en string.

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

Capturar la estructura de un objeto

Aplicado a un objeto const, typeof proporciona toda su estructura inferida; no es necesario escribir la interfaz manualmente.

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

La inferencia amplía los tipos de forma predeterminada

Sin ayuda adicional, TypeScript amplía los literales: port: 8080 se convierte en number, no en el literal 8080. A menudo esto está bien, pero a veces querrá conservar el valor exacto.

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

typeof con as const

Añada as const para fijar un valor en su tipo literal más específico. Ahora typeof captura los literales exactos y marca todo como readonly.

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

Tipos literales a partir de arrays

Con as const, aplicar typeof a un array produce una tupla readonly de tipos literales, que sirve como base para derivar uniones de valores.

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

Derivar una unión de valores

Combine typeof con el acceso indexado mediante [number] para convertir un array de constantes en un tipo unión de sus valores.

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

typeof en funciones

También puede capturar el tipo de una función. Esto resulta útil para tipar envoltorios o reutilizar una signatura en otro lugar.

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

Mantener los tipos sincronizados

La gran ventaja es que puede definir una configuración o unas constantes una sola vez como valores y derivar después los tipos con typeof. Cambie el valor y el tipo se actualizará automáticamente, sin duplicaciones.

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

Solo funciona con identificadores

El operador de tipos typeof acepta un identificador o una ruta de propiedad, no una expresión arbitraria. typeof (a + b) no está permitido.

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

Comprobación rápida

Compruebe cuánto entiende el operador de tipos typeof.

Repaso

El operador de tipos typeof (en una posición de tipo) deriva un tipo a partir de un valor: una variable, un objeto, un array o una función. De forma predeterminada, los literales se amplían; añada as const para capturar tipos literales exactos como readonly. Combinado con el acceso indexado (typeof arr[number]), permite obtener uniones de valores. Derivar tipos a partir de valores mantiene una única fuente de verdad y evita duplicar estructuras.

Gratis para empezar

Aprende TypeScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
101
Lecciones
352

Preguntas frecuentes

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

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

Capture el tipo de un valor en tiempo de ejecución con typeof. 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 1 de 4.

¿Cuánto tiempo toma la lección «El operador de tipos typeof»?

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

  1. El operador de tipos typeof
  2. El operador de tipos keyof
  3. Tipos de acceso indexado
  4. Combinación de typeof y keyof
← Volver a TypeScript Academy