0Pricing
TypeScript Academy · Lección

Tipado de claves de traducción

Derive una unión de claves válidas a partir de archivos de mensajes.

Tipado de claves de traducción 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.

Derivación de claves de traducción válidas

En una configuración de i18n con seguridad de tipos, el conjunto de claves de traducción válidas se deriva del objeto de mensajes. Un error tipográfico como t("greetng") se convierte en un error de compilación, no en un fallo por falta de cadena durante la ejecución.

Un objeto de mensajes

Comience con un objeto sencillo de mensajes. Es la única fuente de verdad tanto para los valores como para el tipo de las claves.

const messages = {
  greeting: "Hello",
  farewell: "Goodbye",
  cart: {
    empty: "Your cart is empty",
    checkout: "Proceed to checkout",
  },
} as const;

Claves de nivel superior con keyof

Para un objeto plano, keyof typeof proporciona la unión de sus claves.

type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"

El problema de los objetos anidados

Los catálogos de mensajes reales están anidados. Queremos rutas separadas por puntos como "cart.empty", no solo claves de nivel superior. Necesitamos un tipo recursivo que recorra el objeto.

Un tipo de rutas recursivo

Un tipo condicional y mapeado construye rutas separadas por puntos al recorrer recursivamente los objetos anidados y anteponer las claves. El prefijo utiliza un tipo de literal de plantilla, que en el código real se escribe con comillas invertidas como [backtick]${K}.${Paths<T[K]>}[backtick]. A continuación lo mostramos como JoinPath(K, child) para mantener limpio el listado.

type JoinPath<K extends string, Rest extends string> = K + "." + Rest;
// (Real TS uses a template literal type:
//   the K dot Rest pattern delimited by backticks.)

type Paths<T> = {
  [K in keyof T & string]: T[K] extends string
    ? K
    : K | (T[K] extends object
        ? JoinPath<K, Paths<T[K]>>
        : never);
}[keyof T & string];

Aplicación

Pasar el tipo de messages a Paths produce todas las claves válidas separadas por puntos.

type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"

Claves solo de hojas

A menudo solo quiere las rutas de hoja (cadenas reales), excluyendo los objetos intermedios. Ajuste la recursión para omitir los nodos que no sean cadenas. El prefijo K-punto-hijo vuelve a utilizar un tipo de literal de plantilla (delimitado por comillas invertidas en el código real), que aquí se muestra como JoinPath.

type LeafPaths<T> = T extends string
  ? ""
  : {
      [K in keyof T & string]: T[K] extends string
        ? K
        : JoinPath<K, LeafPaths<T[K]>>;
    }[keyof T & string];
// "greeting" | "farewell" | "cart.empty" | "cart.checkout"

Una función t con tipos

Restrinja el parámetro de la función de traducción a la unión de claves derivada para que solo se compilen claves válidas.

declare function t(key: LeafPaths<typeof messages>): string;

t("cart.empty");   // ok
t("cart.missing"); // Error: not a valid key

Resolución del tipo de valor

Puede ir más allá e inferir el tipo de valor de una ruta, lo que resulta útil cuando los mensajes contienen entradas que no son cadenas. Un tipo condicional que indexa una ruta recorre los puntos. Divide la ruta mediante un patrón de literal de plantilla que, en el código real, se escribe con comillas invertidas como la forma Head punto Rest con infer. A continuación representamos esa división como SplitHead/SplitRest.

// Conceptually: split "cart.empty" into Head="cart", Rest="empty"
// using a template literal pattern with infer.

type ValueAt<T, P extends string> =
  P extends SplitHead<infer Head, infer Rest>
    ? Head extends keyof T ? ValueAt<T[Head], Rest> : never
    : P extends keyof T ? T[P] : never;

Por qué importa as const

Sin as const, los valores de cadena se amplían a string y se pierde la información literal necesaria después (por ejemplo, para extraer marcadores de posición). Declare siempre los catálogos como constantes.

Por qué es importante

Derivar las claves del catálogo significa que añadir, cambiar de nombre o eliminar un mensaje actualiza al instante el tipo de claves permitidas en todas partes. No hay un enum central que mantener ni constantes de cadena obsoletas.

Comprobación rápida

Compruebe su comprensión de la tipificación de claves de traducción.

Resumen

Derivó una unión de claves válidas a partir de un objeto messages utilizando keyof y un tipo de rutas recursivo de literal de plantilla. Las variantes que solo incluyen hojas excluyen los objetos intermedios, una función t con tipos rechaza las claves no válidas y as const conserva la información literal que necesita la maquinaria de tipos.

Preguntas frecuentes

¿La lección «Tipado de claves de traducción» es gratis?

Sí — el texto completo de «Tipado de claves de traducción» 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 «Tipado de claves de traducción»?

Derive una unión de claves válidas a partir de archivos de mensajes. 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 «Tipado de claves de traducción»?

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. Tipado de claves de traducción
  2. Seguridad de tipos en interpolaciones
  3. Pluralización con tipos
  4. Inferencia de tipos según la configuración regional
← Volver a TypeScript Academy