0Pricing
TypeScript Academy · Lección

Tipos de literales de plantilla: patrones de texto

Combine uniones de cadenas para crear tipos de patrones.

Tipos de literales de plantilla: patrones de texto 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.

Bienvenida

Los tipos de literales de plantilla usan la sintaxis de comillas invertidas a nivel de tipos para construir tipos de cadenas a partir de combinaciones de otros tipos de cadenas.

Tipo de literal de plantilla básico

Combine tipos de literales de cadena con la sintaxis de plantilla.
type Greeting = `Hello, ${string}`;
const g: Greeting = 'Hello, World'; // OK
// const bad: Greeting = 'Hi there'; // Error

Combinación de uniones

Cuando se usa una unión en un literal de plantilla, TypeScript genera todas las combinaciones.
type Color = 'red' | 'green' | 'blue';
type Size = 'sm' | 'lg';
type ColorSize = `${Color}-${Size}`;
// 'red-sm' | 'red-lg' | 'green-sm' | ...

Patrón de nombres de eventos

Un uso habitual es generar nombres de eventos tipados a partir de entidades.
type Entity = 'user' | 'product';
type EventName = `on${Capitalize<Entity>}Created`;
// 'onUserCreated' | 'onProductCreated'

Capitalize y otros tipos intrínsecos

TypeScript proporciona `Capitalize`, `Uncapitalize`, `Uppercase` y `Lowercase` como tipos integrados para manipular cadenas.
type T = Capitalize<'hello world'>; // 'Hello world'
type U = Uppercase<'hello'>;        // 'HELLO'
type L = Lowercase<'WORLD'>;        // 'world'

Patrón de generación de getters

Use tipos de literales de plantilla con tipos mapeados para generar nombres de métodos getter.
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

Parámetros de rutas tipados

Extraiga parámetros de ruta tipados a partir de una cadena con un patrón de URL.
type RouteParams<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | RouteParams<Rest>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

Nombres de propiedades CSS

Genere nombres tipados para propiedades personalizadas de CSS.
type CSSVar = `--${string}`;
const color: CSSVar = '--primary-color'; // OK

Literal de plantilla en parámetros de función

Use tipos de literales de plantilla para restringir parámetros de cadena.
function emit<E extends `on${string}`>(event: E): void {
  console.log('Emitting:', event);
}
emit('onClick'); // OK
// emit('click'); // Error — must start with 'on'

Extracción de partes con infer

Use `infer` dentro de literales de plantilla para extraer subcadenas a nivel de tipos.
type GetSuffix<T extends string> =
  T extends `${infer _Prefix}_${infer Suffix}` ? Suffix : never;
type S = GetSuffix<'user_created'>; // 'created'

Intersección con Record

Combine tipos de literales de plantilla con `Record` para crear mapas tipados de controladores de eventos.
type Handlers<T extends string> = Record<`on${Capitalize<T>}`, () => void>;

Comprobación rápida

¿En qué se evalúa `type R = `${string | number}-id``?

Recapitulación

Los tipos de literales de plantilla construyen tipos de cadenas a partir de combinaciones mediante la sintaxis de comillas invertidas. Se distribuyen entre uniones, funcionan con las utilidades `Capitalize` y `Uppercase`, y permiten crear patrones potentes para nombres de eventos, parámetros de rutas y variables CSS.

Preguntas frecuentes

¿La lección «Tipos de literales de plantilla: patrones de texto» es gratis?

Sí — el texto completo de «Tipos de literales de plantilla: patrones de texto» 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 «Tipos de literales de plantilla: patrones de texto»?

Combine uniones de cadenas para crear tipos de patrones. 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 «Tipos de literales de plantilla: patrones de texto»?

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. Tipos mapeados: transformación de tipos de objetos
  2. Modificadores en tipos mapeados: readonly y ?
  3. Tipos de literales de plantilla: patrones de texto
  4. Reasignación de claves con as en tipos mapeados
← Volver a TypeScript Academy