Tipos de literales de plantilla
Combine tipos de literales de cadena con la sintaxis de literales de plantilla para derivar tipos como nombres de eventos, cadenas de propiedades CSS y rutas de API.
Tipos de literales de plantilla es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los tipos de literales de plantilla?
TypeScript puede construir tipos de cadenas a partir de literales de plantilla en el nivel de tipos. Combinados con tipos unión, permiten expresar miles de cadenas válidas sin enumerarlas una por una.
Tipo de literal de plantilla básico
Utilice cadenas entre comillas invertidas en la posición de tipo; aceptan otros tipos como interpolaciones.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // ErrorCombinar uniones
Al interpolar una unión, TypeScript crea el producto cartesiano de todas las combinaciones.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)Inferencia de nombres de eventos
Derive los nombres de los controladores a partir de los nombres de eventos: un uso clásico en situaciones reales.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }Tipos de utilidad para manipular cadenas
TypeScript incluye asistentes integrados: Uppercase<T>, Lowercase<T>, Capitalize<T> y Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'Tipos de propiedades CSS
Exprese tipos de cadenas similares a CSS: valores en píxeles, colores hexadecimales y porcentajes.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // ErrorInferencia con literales de plantilla
La palabra clave infer puede extraer partes de un tipo de cadena, lo que resulta útil para analizadores y tipos de rutas.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'Tipos de rutas de API
Defina rutas de API con seguridad de tipos: extraiga los parámetros de ruta a partir de un patrón de cadena.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tipos para sugerir clases de Tailwind
Limite las props de tipo cadena a valores conocidos del sistema de diseño.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }Límites y rendimiento del compilador
Los productos cartesianos de literales de plantilla pueden crecer desmesuradamente (una unión de 50 × 50 produce 2500 cadenas). TypeScript compilará el código, pero la inferencia se volverá lenta. Mantenga pequeño el conjunto de valores posibles.
Distinguir tipos de literales de cadena
Utilice los literales de plantilla como una forma más expresiva de marcado de tipos: siguen siendo cadenas, pero están restringidas.
Comprobación rápida
¿En qué se evalúa type X = `on${Capitalize<'click' | 'focus'>}`?
Resumen: tipos de literales de plantilla
Construya tipos de cadenas a partir de literales de plantilla con uniones interpoladas. Los productos cartesianos crecen rápidamente; mantenga pequeño el conjunto de valores posibles. Utilice Capitalize/Uppercase/Lowercase/Uncapitalize. Combínelos con infer para extraer partes de cadenas. Son ideales para nombres de eventos, valores CSS, parámetros de rutas y nombres de clases del sistema de diseño.
Preguntas frecuentes
¿La lección «Tipos de literales de plantilla» es gratis?
Sí — el texto completo de «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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tipos de literales de plantilla»?
Combine tipos de literales de cadena con la sintaxis de literales de plantilla para derivar tipos como nombres de eventos, cadenas de propiedades CSS y rutas de API. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 «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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Tipos de literales de plantilla
- Decoradores y metadatos
- TypeScript con React: genéricos, FC y hooks
- Modo estricto y eliminación de any