Uniones de cadenas y autocompletado
Obtenga autocompletado del editor para valores de cadena conocidos.
Uniones de cadenas y autocompletado es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 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 uniones impulsan el autocompletado
Una unión de literales de cadena cumple una doble función: restringe los valores permitidos y alimenta el autocompletado del editor. Sin embargo, a veces querrá sugerencias y, al mismo tiempo, libertad para pasar cualquier cadena; un ingenioso truco permite ambas cosas.
Una unión básica de literales de cadena
Declare una unión de cadenas permitidas. El editor ofrece exactamente estas opciones y los valores no válidos producen errores de compilación.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // ErrorAutocompletado en el editor
Cuando un parámetro es una unión de literales de cadena, al escribir dentro de la llamada aparecen sus miembros exactos. Esta es una de las características ergonómicas más apreciadas de TypeScript.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueLa limitación
Una unión estricta prohíbe cualquier valor que no esté en la lista. A veces querrá sugerir valores comunes y, a la vez, permitir cadenas personalizadas arbitrarias; una unión normal no puede hacer ambas cosas.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))La ampliación elimina las sugerencias
Si utiliza simplemente string, cualquier valor es válido, pero el autocompletado desaparece por completo. Ha cambiado todas las indicaciones por una flexibilidad total, lo que no siempre es lo ideal.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsEl truco de string y la unión de literales
El truco consiste en unir los literales con string & {}. Los literales siguen apareciendo en el autocompletado, mientras que string & {} permite cualquier otra cadena sin reducir la unión.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)Por qué funcionan string y el objeto vacío
Normalmente, 'red' | string se simplifica a string y elimina los literales. La intersección con {} crea un tipo ligeramente diferente que TypeScript mantiene separado, por lo que los literales siguen disponibles para el autocompletado y cualquier cadena sigue siendo válida.
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)Un helper reutilizable
Envuelva el truco en un alias genérico para que la intención sea clara y pueda reutilizarlo en todo su código.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)Aplicación a una función
Utilice el helper en una API para ofrecer sugerencias de entradas comunes a quienes la llamen y, al mismo tiempo, aceptar valores personalizados.
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedCuándo utilizar el truco
Recurra a él cuando una API tenga valores conocidos, pero deba permanecer abierta: nombres de iconos, unidades CSS, tokens de temas y presets de frameworks. Para conjuntos cerrados, prefiera una unión estricta que proporcione seguridad completa.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)Compromisos
El truco conserva las sugerencias, pero reduce la seguridad: los errores tipográficos en cadenas personalizadas dejan de detectarse. Utilícelo deliberadamente cuando la apertura sea una característica, no como opción predeterminada.
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)Comprobación rápida
Compruebe su comprensión del truco del autocompletado.
Resumen
Las uniones de literales de cadena permiten el autocompletado del editor y restringen los valores, pero una unión estricta prohíbe las cadenas personalizadas, mientras que string normal pierde todas las sugerencias. El truco T | (string & {}) conserva los literales como sugerencias y, al mismo tiempo, acepta cualquier cadena. Envuélvalo en un helper LiteralUnion<T> y utilícelo solo cuando se pretenda mantener la apertura, ya que sacrifica la seguridad que permite detectar errores tipográficos.
Preguntas frecuentes
¿La lección «Uniones de cadenas y autocompletado» es gratis?
Sí — el texto completo de «Uniones de cadenas y autocompletado» 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 «Uniones de cadenas y autocompletado»?
Obtenga autocompletado del editor para valores de cadena conocidos. 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 3 de 4.
¿Cuánto tiempo toma la lección «Uniones de cadenas y autocompletado»?
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
- Conceptos básicos de los tipos de literales de plantilla
- Modelado de cadenas estructuradas
- Uniones de cadenas y autocompletado
- Tipos intrínsecos de manipulación de cadenas