Modelado de cadenas estructuradas
Imponga formatos como nombres de eventos y rutas.
Modelado de cadenas estructuradas es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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.
Cómo imponer formatos de cadena
Muchas cadenas de las aplicaciones reales siguen una estructura: nombres de controladores de eventos, rutas de API y variables CSS. Los tipos de plantilla literal permiten modelar estos formatos para que el compilador los imponga.
Modelado de nombres de controladores de eventos
El nombre de un controlador suele tener la forma on seguida de un evento con la primera letra en mayúscula. Al utilizar el helper intrínseco Capitalize dentro de una plantilla, el evento 'click' se transforma en el nombre de controlador 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Por qué Capitalize es importante aquí
Sin Capitalize, la plantilla produciría 'onclick'. El tipo intrínseco convierte en mayúscula el primer carácter del literal y produce nombres de controladores en camelCase idiomáticos.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Generación de un mapa de controladores
Combine claves de plantilla literal con un tipo mapeado para generar un tipo de objeto de controladores: una función tipada por evento, con nombres escritos correctamente.
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)Modelado de rutas
Las rutas de API comparten una estructura formada por una barra inicial, un recurso y un segmento de identificador. Una plantilla que combina texto fijo con un marcador de posición captura las rutas válidas.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Rutas parametrizadas
Añada un marcador de posición para un identificador dinámico. Una plantilla con una barra, un recurso, otra barra y, después, un segmento de identificador genérico modela rutas como una ruta de usuarios seguida de un identificador numérico.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Imposición de formatos en tiempo de compilación
Al tipar un parámetro como un tipo de plantilla literal, rechaza cualquier cadena que no siga la estructura, lo que sirve como protección frente a rutas o claves con un formato incorrecto.
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")Composición de nombres de variables CSS
Las propiedades personalizadas de CSS siguen un esquema de nombres. Una plantilla con dos guiones iniciales y un marcador de posición para el token modela nombres como el de una variable de token de color.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)División mediante inferencia
Los tipos de plantilla literal también pueden analizar cadenas: con tipos condicionales y infer, puede extraer partes de una cadena estructurada a nivel de tipos; por ejemplo, extraer el método de una cadena de endpoint.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Beneficios en proyectos reales
Los tipos de cadenas estructuradas detectan clases enteras de errores: un nombre de controlador mal escrito, una ruta desconocida o un token CSS incorrecto se convierten en errores de compilación en lugar de fallos silenciosos en tiempo de ejecución.
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))Manténgalos legibles
Aunque son potentes, los tipos de plantilla profundamente anidados dificultan la legibilidad. Asigne nombres a los alias de tipo intermedios para que la estructura siga siendo clara para quien lea el código después.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Comprobación rápida
Compruebe su comprensión del modelado de cadenas estructuradas.
Resumen
Los tipos de plantilla literal modelan cadenas estructuradas — nombres de controladores (on + Capitalize de un evento), rutas y variables CSS — e imponen esos formatos en tiempo de compilación. Combinados con tipos mapeados, generan mapas de controladores; y con tipos condicionales y infer, analizan cadenas. Asigne nombres a los alias intermedios para mantener legibles los patrones complejos.
Preguntas frecuentes
¿La lección «Modelado de cadenas estructuradas» es gratis?
Sí — el texto completo de «Modelado de cadenas estructuradas» 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 «Modelado de cadenas estructuradas»?
Imponga formatos como nombres de eventos y rutas. 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 2 de 4.
¿Cuánto tiempo toma la lección «Modelado de cadenas estructuradas»?
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