Remapeo de claves y tipos de literales de plantilla
Remapee claves con “as”, cree claves mediante literales de plantilla (Capitalize/Uncapitalize) y filtre propiedades según patrones de nombres.
Remapeo de claves y tipos de literales de plantilla es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 3. 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 3 lecciones en total.
Introducción
Objetivo: Utilice el remapeo de claves (la cláusula as) con tipos de literales de plantilla para cambiar el nombre, generar o eliminar propiedades según patrones de nombres.
- Cambie el nombre de las claves:
K as NewK - Filtre las claves con
never - Componga nombres:
`get${Capitalize<K>}`
Cambiar el nombre de las claves
Cambie el nombre de las claves con as. Ejemplo: convierta nombres snake_case en camelCasee.
type Original = { first_name: string; last_name: string }
type Camelize<T> = {
[K in keyof T as K extends `${infer A}_${infer B}`
? `${A}${Capitalize<B>}`
: K]: T[K]
}
type UserCamel = Camelize<Original> // { firstName: string; lastName: string }Filtrar por prefijo
Se omite la clave never. Plantilla: filtre los controladores de eventos con `on${string}`.
type Props = { onClick: () => void; onSubmit: () => void; title: string }
type WithoutHandlers<T> = {
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
}
type Clean = WithoutHandlers<Props> // { title: string }Generar métodos
Genere superficies de API con nombres de plantilla: el patrón get${Capitalize<K>} se utiliza para crear getters a partir de campos.
type Fields = "name" | "email"
type Getters<T extends string> = {
[K in T as `get${Capitalize<K>}`]: () => string
}
type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }Componer patrones
Combine varias plantillas para generar nombres sólidos y garantizar una nomenclatura coherente en proyectos grandes.
type Route = `/${"" | `${string}`}`
type HttpMethod = "get" | "post"
type Endpoints<T extends string, M extends string> = {
[K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}
type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }Consejos y escollos
Consejos:
El remapeo es costoso; divida los tipos complejos mediante alias.
Utilice plantillas sencillas para los filtros: `on${string}`, `data-${string}`.
Utilice los ayudantes Capitalize/Uncapitalize/Uppercase/Lowercase.
Simplifique la API si la generación de nombres se vuelve excesiva.
Comprobación de filtrado por prefijo
Comprobación rápida: ¿Qué patrón de tipo mapeado elimina las propiedades que comienzan por on?
Repaso
Repaso: Cambie nombres o filtre con el remapeo de claves; genere claves con tipos de literales de plantilla; elimine las no deseadas con never.
Preguntas frecuentes
¿La lección «Remapeo de claves y tipos de literales de plantilla» es gratis?
Sí — el texto completo de «Remapeo de claves y 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 3 lecciones en total.
¿Qué aprenderé en «Remapeo de claves y tipos de literales de plantilla»?
Remapee claves con “as”, cree claves mediante literales de plantilla (Capitalize/Uncapitalize) y filtre propiedades según patrones de nombres. 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 3.
¿Cuánto tiempo toma la lección «Remapeo de claves y 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
- Tipos mapeados con +/-readonly y +/-?
- Remapeo de claves y tipos de literales de plantilla
- Tipado de patrones de cadenas (parámetros de ruta y nombres de eventos)