Conceptos básicos de los tipos de literales de plantilla
Cree tipos de cadenas a partir de uniones y marcadores de posición.
Conceptos básicos de los tipos de literales de plantilla 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.
Cadenas a nivel de tipos
Los tipos de plantilla literal construyen nuevos tipos literales de cadena combinando otros tipos de cadena. Utilizan la misma sintaxis de comillas invertidas y marcadores de posición que las cadenas de plantilla en tiempo de ejecución, pero operan exclusivamente sobre tipos.
Un tipo de plantilla literal sencillo
Imagine un alias de tipo Greeting definido como una plantilla literal que contiene el texto Hello, seguido de un marcador de posición para el tipo Name. Si Name es el literal 'Ada', entonces Greeting es el tipo literal 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Los marcadores de posición incorporan otros tipos
Dentro del marcador de posición puede colocar cualquier tipo similar a una cadena: un literal, un parámetro de tipo o una unión. TypeScript lo sustituye en el texto circundante para formar un nuevo tipo literal.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Combinar uniones multiplica las variantes
Cuando un marcador de posición contiene una unión, la plantilla se expande con cada miembro. Una plantilla que combina 'a' | 'b' con un sufijo fijo produce una unión con cada combinación.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Varios marcadores de posición se multiplican entre sí
Dos marcadores de posición de unión forman un producto cartesiano. Combinar los tamaños 'sm' | 'lg' con los colores 'red' | 'blue' mediante un separador produce cuatro tipos literales.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Por qué resulta útil
Los tipos de plantilla literal permiten describir con precisión familias de cadenas — nombres de clases CSS, nombres de eventos y rutas — para que el compilador rechace las cadenas con formato incorrecto antes del tiempo de ejecución.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Los números y booleanos se convierten a texto
Los tipos que no son cadenas colocados en un tipo de plantilla literal se convierten a su representación textual. Un literal numérico 42 se convierte en el texto 42 dentro del tipo de cadena resultante.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Uso de un marcador de posición genérico
Una función genérica puede construir un tipo de retorno de plantilla literal a partir del tipo literal de su argumento, de modo que la cadena precisa se conoce en cada punto de llamada.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeRestricción de las entradas
Puede exigir que un valor coincida con un tipo de plantilla literal. Solo se aceptan las cadenas que siguen el patrón descrito, lo que permite detectar errores tipográficos en tiempo de compilación.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableEl tipo string amplio rompe el patrón
Si un marcador de posición es del tipo amplio string en lugar de un literal, toda la plantilla se reduce a string. Para conservar la especificidad se necesitan entradas literales, a menudo mediante as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Dónde utilizarlos
Los tipos de plantilla literal son ideales para cualquier caso en el que las cadenas sigan una estructura: clases de utilidad CSS, identificadores con prefijo, claves de consulta y nombres de eventos. Convierten las convenciones de cadenas en contratos comprobados por el compilador.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Comprobación rápida
Compruebe su comprensión de los conceptos básicos de los tipos de plantilla literal.
Resumen
Los tipos de plantilla literal construyen tipos literales de cadena sustituyendo marcadores de posición en el texto circundante. Los marcadores de posición de unión se expanden a todas las combinaciones, y varias uniones forman un producto cartesiano. Los literales que no son cadenas se convierten a su representación textual. Un marcador de posición amplio string reduce el resultado a string, por lo que se necesitan entradas literales — a menudo mediante as const — para obtener tipos precisos. Estos tipos permiten que el compilador compruebe las convenciones de cadenas.
Preguntas frecuentes
¿La lección «Conceptos básicos de los tipos de literales de plantilla» es gratis?
Sí — el texto completo de «Conceptos básicos de los tipos de literales de plantilla» 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 «Conceptos básicos de los tipos de literales de plantilla»?
Cree tipos de cadenas a partir de uniones y marcadores de posición. 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 «Conceptos básicos de los tipos de literales de plantilla»?
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