Alternativas a los Enums de TypeScript: Navegando las Const Assertions y Union Types para un Código Robusto

TypeScript, un potente superconjunto de JavaScript, aporta tipado estático al mundo dinámico del desarrollo web. Entre sus muchas características, la palabra clave enum ha sido durante mucho tiempo una opción para definir un conjunto de constantes nombradas. Los enums proporcionan una forma clara de representar una colección fija de valores relacionados, mejorando la legibilidad y la seguridad de tipos.

Sin embargo, a medida que el ecosistema de TypeScript madura y los proyectos crecen en complejidad y escala, los desarrolladores de todo el mundo cuestionan cada vez más la utilidad tradicional de los enums. Si bien son sencillos para casos simples, los enums introducen ciertos comportamientos y características en tiempo de ejecución que a veces pueden generar problemas inesperados, afectar el tamaño del paquete o complicar las optimizaciones de tree-shaking. Esto ha llevado a una exploración generalizada de alternativas.

Esta guía completa profundiza en dos alternativas prominentes y muy efectivas a los enums de TypeScript: Union Types con Literales de Cadena/Numéricos y Const Assertions (as const). Exploraremos sus mecanismos, aplicaciones prácticas, beneficios y compensaciones, proporcionándole los conocimientos necesarios para tomar decisiones de diseño informadas para sus proyectos, independientemente de su tamaño o del equipo global que trabaje en ellos. Nuestro objetivo es potenciarle para que escriba código TypeScript más robusto, mantenible y eficiente.

El Enum de TypeScript: Un Rápido Recapitulación

Antes de sumergirnos en las alternativas, repasemos brevemente el enum tradicional de TypeScript. Los enums permiten a los desarrolladores definir un conjunto de constantes nombradas, haciendo el código más legible y evitando que "cadenas mágicas" o "números mágicos" se dispersen por toda una aplicación. Vienen en dos formas principales: enums numéricos y de cadena.

Enums Numéricos

Por defecto, los enums de TypeScript son numéricos. El primer miembro se inicializa con 0, y cada miembro subsiguiente se incrementa automáticamente.

            enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let currentDirection: Direction = Direction.Up;
console.log(currentDirection); // Muestra: 0
console.log(Direction.Left);    // Muestra: 2

            

              
                Copy
              
            
          

También puede inicializar manualmente miembros de enum numéricos:

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  ServerError = 500,
}

let status: StatusCode = StatusCode.NotFound;
console.log(status); // Muestra: 404

            

              
                Copy
              
            
          

Una característica peculiar de los enums numéricos es el mapeo inverso. En tiempo de ejecución, un enum numérico se compila en un objeto JavaScript que mapea tanto nombres a valores como valores a nombres.

            enum UserRole {
  Admin = 1,
  Editor,
  Viewer,
}

console.log(UserRole[1]); // Muestra: "Admin"
console.log(UserRole.Editor); // Muestra: 2
console.log(UserRole[2]); // Muestra: "Editor"

/*
Se compila a JavaScript:
var UserRole;
(function (UserRole) {
    UserRole[UserRole["Admin"] = 1] = "Admin";
    UserRole[UserRole["Editor"] = 2] = "Editor";
    UserRole[UserRole["Viewer"] = 3] = "Viewer";
})(UserRole || (UserRole = {}));
*/

            

              
                Copy
              
            
          

Enums de Cadena

Los enums de cadena a menudo se prefieren por su legibilidad en tiempo de ejecución, ya que no dependen de números que se auto-incrementan. Cada miembro debe inicializarse con un literal de cadena.

            enum UserPermission {
  Read = "READ_PERMISSION",
  Write = "WRITE_PERMISSION",
  Delete = "DELETE_PERMISSION",
}

let permission: UserPermission = UserPermission.Write;
console.log(permission); // Muestra: "WRITE_PERMISSION"

            

              
                Copy
              
            
          

Los enums de cadena no obtienen un mapeo inverso, lo cual es generalmente algo bueno para evitar comportamientos inesperados en tiempo de ejecución y reducir la salida de JavaScript generada.

Consideraciones Clave y Posibles Peligros de los Enums

Si bien los enums ofrecen conveniencia, vienen con ciertas características que merecen una cuidadosa consideración:

• Objetos en Tiempo de Ejecución: Tanto los enums numéricos como los de cadena generan objetos JavaScript en tiempo de ejecución. Esto significa que contribuyen al tamaño del paquete de su aplicación, incluso si solo los usa para la verificación de tipos. Para proyectos pequeños, esto podría ser insignificante, pero en aplicaciones a gran escala con muchos enums, la suma puede ser considerable.
• Falta de Tree-Shaking: Debido a que los enums son objetos en tiempo de ejecución, a menudo no son efectivamente tree-shakeados por los bundlers modernos como Webpack o Rollup. Si define un enum pero solo usa uno o dos de sus miembros, todo el objeto enum podría incluirse en su paquete final. Esto puede llevar a tamaños de archivo más grandes de lo necesario.
• Mapeo Inverso (Enums Numéricos): La característica de mapeo inverso de los enums numéricos, aunque a veces útil, también puede ser una fuente de confusión y comportamientos inesperados. Agrega código adicional a la salida de JavaScript y podría no ser siempre la funcionalidad deseada. Por ejemplo, serializar enums numéricos a veces puede resultar en que solo se almacene el número, lo que podría no ser tan descriptivo como una cadena.
• Sobrecarga de Transpilación: La compilación de enums a objetos JavaScript agrega una ligera sobrecarga al proceso de compilación en comparación con simplemente definir variables constantes.
• Iteración Limitada: Iterar directamente sobre los valores de los enums puede ser trivial, especialmente con enums numéricos debido al mapeo inverso. A menudo necesita funciones auxiliares o bucles específicos para obtener solo los valores deseados.

Estos puntos resaltan por qué muchos equipos de desarrollo globales, especialmente aquellos centrados en el rendimiento y el tamaño del paquete, buscan alternativas que brinden una seguridad de tipos similar sin la sobrecarga en tiempo de ejecución u otras complejidades.

Alternativa 1: Union Types con Literales

Una de las alternativas más sencillas y potentes a los enums en TypeScript es el uso de Union Types con Literales de Cadena o Numéricos. Este enfoque aprovecha el robusto sistema de tipos de TypeScript para definir un conjunto de valores específicos y permitidos en tiempo de compilación, sin introducir nuevas construcciones en tiempo de ejecución.

¿Qué son los Union Types?

Un tipo de unión describe un valor que puede ser uno de varios tipos. Por ejemplo, string | number significa que una variable puede contener una cadena o un número. Cuando se combina con tipos literales (por ejemplo, "success", 404), puede definir un tipo que solo puede contener un conjunto específico de valores predefinidos.

Ejemplo Práctico: Definiendo Estados con Union Types

Consideremos un escenario común: definir un conjunto de estados posibles para un trabajo de procesamiento de datos o la cuenta de un usuario. Con los tipos de unión, esto se ve limpio y conciso:

            type JobStatus = "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED";

function processJob(status: JobStatus): void {
  if (status === "COMPLETED") {
    console.log("Job finished successfully.");
  } else if (status === "FAILED") {
    console.log("Job encountered an error.");
  } else {
    console.log(`Job is currently ${status}.`);
  }
}

let currentJobStatus: JobStatus = "IN_PROGRESS";
processJob(currentJobStatus);

// Esto resultaría en un error en tiempo de compilación:
// let invalidStatus: JobStatus = "CANCELLED"; // Error: Type '"CANCELLED"' is not assignable to type 'JobStatus'.

            

              
                Copy
              
            
          

Para valores numéricos, el patrón es idéntico:

            type HttpCode = 200 | 400 | 404 | 500;

function handleResponse(code: HttpCode): void {
  if (code === 200) {
    console.log("Operation successful.");
  } else if (code === 404) {
    console.log("Resource not found.");
  }
}

let responseStatus: HttpCode = 200;
handleResponse(responseStatus);

            

              
                Copy
              
            
          

Observe cómo estamos definiendo un alias de type aquí. Esto es puramente una construcción en tiempo de compilación. Cuando se compila a JavaScript, JobStatus simplemente desaparece, y se utilizan los literales de cadena o número directamente.

Beneficios de los Union Types con Literales

Este enfoque ofrece varias ventajas convincentes:

• Puramente en Tiempo de Compilación: Los tipos de unión se borran por completo durante la compilación. No generan ningún código JavaScript en tiempo de ejecución, lo que lleva a tamaños de paquete más pequeños y tiempos de inicio de aplicación más rápidos. Esta es una ventaja significativa para aplicaciones críticas de rendimiento y aquellas desplegadas globalmente donde cada kilobyte cuenta.
• Excelente Seguridad de Tipos: TypeScript verifica rigurosamente las asignaciones contra los tipos literales definidos, proporcionando fuertes garantías de que solo se utilizan valores válidos. Esto previene errores comunes asociados con errores tipográficos o valores incorrectos.
• Tree-Shaking Óptimo: Dado que no hay objeto en tiempo de ejecución, los tipos de unión admiten inherentemente el tree-shaking. Su bundler solo incluye los literales de cadena o número reales que utiliza, no un objeto completo.
• Legibilidad: Para un conjunto fijo de valores simples y distintos, la definición del tipo es a menudo muy clara y fácil de entender.
• Simplicidad: No se introducen nuevas construcciones de lenguaje ni artefactos de compilación complejos. Simplemente aprovecha las características fundamentales de tipos de TypeScript.
• Acceso Directo al Valor: Trabaja directamente con los valores de cadena o número, lo que simplifica la serialización y deserialización, especialmente al interactuar con APIs o bases de datos que esperan identificadores de cadena específicos.

Desventajas de los Union Types con Literales

Si bien son potentes, los tipos de unión también tienen algunas limitaciones:

• Repetición para Datos Asociados: Si necesita asociar datos o metadatos adicionales con cada miembro del "enum" (por ejemplo, una etiqueta de visualización, un icono, un color), no puede hacerlo directamente dentro de la definición del tipo de unión. Normalmente necesitaría un objeto de mapeo separado.
• Sin Iteración Directa de Todos los Valores: No hay una forma integrada de obtener una matriz de todos los valores posibles de un tipo de unión en tiempo de ejecución. Por ejemplo, no puede obtener fácilmente ["PENDING", "IN_PROGRESS", "COMPLETED", "FAILED"] directamente de JobStatus. Esto a menudo requiere mantener una matriz separada de valores si necesita mostrarlos en una interfaz de usuario (por ejemplo, un menú desplegable).
• Menos Centralizado: Si el conjunto de valores se necesita tanto como tipo como como matriz de valores en tiempo de ejecución, es posible que se encuentre definiendo la lista dos veces (una vez como tipo, una vez como matriz en tiempo de ejecución), lo que puede introducir una posible desincronización.

A pesar de estas desventajas, para muchos escenarios, los tipos de unión proporcionan una solución limpia, de alto rendimiento y segura en cuanto a tipos que se alinea bien con las prácticas modernas de desarrollo de JavaScript.

Alternativa 2: Const Assertions (as const)

La aserción as const, introducida en TypeScript 3.4, es otra herramienta increíblemente potente que ofrece una excelente alternativa a los enums, especialmente cuando necesita un objeto en tiempo de ejecución y una inferencia de tipo robusta. Permite a TypeScript inferir el tipo más estrecho posible para expresiones literales.

¿Qué son las Const Assertions?

Cuando aplica as const a una variable, una matriz o un literal de objeto, TypeScript trata todas las propiedades dentro de ese literal como readonly e infiere sus tipos literales en lugar de tipos más amplios (por ejemplo, "foo" en lugar de string, 123 en lugar de number). Esto hace posible derivar tipos de unión altamente específicos de estructuras de datos en tiempo de ejecución.

Ejemplo Práctico: Creando un Objeto "Pseudo-Enum" con as const

Volvamos a nuestro ejemplo de estado de trabajo. Con as const, podemos definir una única fuente de verdad para nuestros estados, que actúa tanto como un objeto en tiempo de ejecución como una base para definiciones de tipos.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// JobStatuses.PENDING ahora se infiere como el tipo "PENDING" (no solo string)
// JobStatuses se infiere como el tipo {
//   readonly PENDING: "PENDING";
//   readonly IN_PROGRESS: "IN_PROGRESS";
//   readonly COMPLETED: "COMPLETED";
//   readonly FAILED: "FAILED";
// }

            

              
                Copy
              
            
          

En este punto, JobStatuses es un objeto JavaScript en tiempo de ejecución, al igual que un enum regular. Sin embargo, su inferencia de tipo es mucho más precisa.

Combinando con typeof y keyof para Union Types

El verdadero poder emerge cuando combinamos as const con los operadores typeof y keyof de TypeScript para derivar un tipo de unión de los valores o claves del objeto.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// Tipo que representa las claves (por ejemplo, "PENDING" | "IN_PROGRESS" | ...)
type JobStatusKeys = keyof typeof JobStatuses;

// Tipo que representa los valores (por ejemplo, "PENDING" | "IN_PROGRESS" | ...)
type JobStatusValues = typeof JobStatuses[keyof typeof JobStatuses];

function processJobWithConstAssertion(status: JobStatusValues): void {
  if (status === JobStatuses.COMPLETED) {
    console.log("Job finished successfully.");
  } else if (status === JobStatuses.FAILED) {
    console.log("Job encountered an error.");
  } else {
    console.log(`Job is currently ${status}.`);
  }
}

let currentJobStatusFromObject: JobStatusValues = JobStatuses.IN_PROGRESS;
processJobWithConstAssertion(currentJobStatusFromObject);

// Esto resultaría en un error en tiempo de compilación:
// let invalidStatusFromObject: JobStatusValues = "CANCELLED"; // Error!

            

              
                Copy
              
            
          

Este patrón proporciona lo mejor de ambos mundos: un objeto en tiempo de ejecución para la iteración o el acceso directo a propiedades, y un tipo de unión en tiempo de compilación para una verificación de tipos estricta.

Beneficios de las Const Assertions con Union Types Derivados

• Única Fuente de Verdad: Define sus constantes una vez en un objeto JavaScript plano, y deriva tanto el acceso en tiempo de ejecución como los tipos en tiempo de compilación a partir de él. Esto reduce significativamente la duplicación y mejora la mantenibilidad en diversos equipos de desarrollo.
• Seguridad de Tipos: Similar a los tipos de unión puros, obtiene una excelente seguridad de tipos, asegurando que solo se utilicen los valores predefinidos.
• Iterabilidad en Tiempo de Ejecución: Dado que JobStatuses es un objeto JavaScript estándar, puede iterar fácilmente sobre sus claves o valores utilizando métodos JavaScript estándar como Object.keys(), Object.values() u Object.entries(). Esto es invaluable para interfaces de usuario dinámicas (por ejemplo, llenar menús desplegables) o para registrar información.
• Datos Asociados: Este patrón admite de forma natural la asociación de datos adicionales con cada miembro del "enum".
• Mejor Potencial de Tree-Shaking (Comparado con Enums): Si bien as const crea un objeto en tiempo de ejecución, es un objeto JavaScript estándar. Los bundlers modernos generalmente son más efectivos para tree-shake unar propiedades no utilizadas o incluso objetos completos si no se referencian, en comparación con la salida de compilación de enums de TypeScript. Sin embargo, si el objeto es grande y solo se utilizan algunas propiedades, el objeto completo aún podría incluirse si se importa de una manera que impida el tree-shaking granular.
• Flexibilidad: Puede definir valores que no son solo cadenas o números, sino objetos más complejos si es necesario, lo que hace que este sea un patrón muy flexible.

            const FileOperations = {
  UPLOAD: {
    label: "Upload File",
    icon: "upload-icon.svg",
    permission: "can_upload"
  },
  DOWNLOAD: {
    label: "Download File",
    icon: "download-icon.svg",
    permission: "can_download"
  },
  DELETE: {
    label: "Delete File",
    icon: "delete-icon.svg",
    permission: "can_delete"
  },
} as const;

type FileOperationType = keyof typeof FileOperations; // "UPLOAD" | "DOWNLOAD" | "DELETE"
type FileOperationDetail = typeof FileOperations[keyof typeof FileOperations]; // { label: string; icon: string; permission: string; }

function performOperation(opType: FileOperationType) {
  const details = FileOperations[opType];
  console.log(`Performing: ${details.label} (Permission: ${details.permission})`);
}

performOperation("UPLOAD");

            

              
                Copy
              
            
          

Desventajas de las Const Assertions

• Presencia de Objeto en Tiempo de Ejecución: A diferencia de los tipos de unión puros, este enfoque todavía crea un objeto JavaScript en tiempo de ejecución. Si bien es un objeto estándar y a menudo mejor para el tree-shaking que los objetos enum de TypeScript, no se borra por completo.
• Definición de Tipo Ligeramente Más Verbosa: Derivar el tipo de unión (keyof typeof ... o typeof ...[keyof typeof ...]) requiere un poco más de sintaxis que simplemente enumerar literales para un tipo de unión.
• Potencial de Mal Uso: Si no se usa con cuidado, un objeto as const muy grande aún podría contribuir significativamente al tamaño del paquete si su contenido no se tree-shakea eficazmente a través de los límites de los módulos.

Para escenarios en los que necesita tanto una verificación de tipos robusta en tiempo de compilación como una colección de valores en tiempo de ejecución que se puede iterar o que proporciona datos asociados, as const es a menudo la opción preferida entre los desarrolladores de TypeScript en todo el mundo.

Comparando las Alternativas: ¿Cuándo Usar Qué?

Elegir entre union types y const assertions depende en gran medida de sus requisitos específicos en cuanto a presencia en tiempo de ejecución, iterabilidad y si necesita asociar datos adicionales con sus constantes. Analicemos los factores de decisión.

Simplicidad vs. Robustez

• Union Types: Ofrecen la máxima simplicidad cuando solo necesita un conjunto seguro en cuanto a tipos de valores de cadena o numéricos distintos en tiempo de compilación. Son la opción más ligera.
• Const Assertions: Proporcionan un patrón más robusto cuando necesita tanto seguridad de tipos en tiempo de compilación como un objeto en tiempo de ejecución que se pueda consultar, iterar o extender con metadatos adicionales. La configuración inicial es un poco más verbosa, pero compensa en características.

Presencia en Tiempo de Ejecución vs. Tiempo de Compilación

• Union Types: Son construcciones puramente en tiempo de compilación. No generan absolutamente ningún código JavaScript. Esto es ideal para aplicaciones donde minimizar el tamaño del paquete es primordial, y los valores en sí mismos son suficientes sin necesidad de acceder a ellos como un objeto en tiempo de ejecución.
• Const Assertions: Generan un objeto JavaScript plano en tiempo de ejecución. Este objeto es accesible y utilizable en su código JavaScript. Si bien aumenta el tamaño del paquete, generalmente es más eficiente que los enums de TypeScript y mejores candidatos para el tree-shaking.

Requisitos de Iterabilidad

• Union Types: No ofrecen una forma directa de iterar sobre todos los valores posibles en tiempo de ejecución. Si necesita poblar un menú desplegable o mostrar todas las opciones, necesitará definir una matriz separada de estos valores, lo que podría generar duplicación.
• Const Assertions: Sobresalen aquí. Dado que está trabajando con un objeto JavaScript estándar, puede usar fácilmente Object.keys(), Object.values() u Object.entries() para obtener una matriz de claves, valores o pares clave-valor, respectivamente. Esto los hace perfectos para interfaces de usuario dinámicas o cualquier escenario que requiera enumeración en tiempo de ejecución.

            const PaymentMethods = {
  CREDIT_CARD: "Credit Card",
  PAYPAL: "PayPal",
  BANK_TRANSFER: "Bank Transfer",
} as const;

type PaymentMethodType = keyof typeof PaymentMethods;

// Obtener todas las claves (por ejemplo, para lógica interna)
const methodKeys = Object.keys(PaymentMethods) as PaymentMethodType[];
console.log(methodKeys); // ["CREDIT_CARD", "PAYPAL", "BANK_TRANSFER"]

// Obtener todos los valores (por ejemplo, para mostrar en un menú desplegable)
const methodLabels = Object.values(PaymentMethods);
console.log(methodLabels); // ["Credit Card", "PayPal", "Bank Transfer"]

// Obtener pares clave-valor (por ejemplo, para mapeo)
const methodEntries = Object.entries(PaymentMethods);
console.log(methodEntries); // [["CREDIT_CARD", "Credit Card"], ...]

            

              
                Copy
              
            
          

Implicaciones de Tree-Shaking

• Union Types: Son inherentemente tree-shakeables ya que son solo en tiempo de compilación.
• Const Assertions: Si bien crean un objeto en tiempo de ejecución, los bundlers modernos a menudo pueden tree-shakear propiedades no utilizadas de este objeto de manera más efectiva que con los objetos enum generados por TypeScript. Sin embargo, si se importa todo el objeto y se hace referencia a él, es probable que se incluya. Un diseño de módulo cuidadoso puede ayudar.

Mejores Prácticas y Enfoques Híbridos

No siempre es una situación de "o esto o aquello". A menudo, la mejor solución implica un enfoque híbrido, especialmente en aplicaciones grandes e internacionalizadas:

• Para indicadores o identificadores simples, puramente internos, que nunca necesitan ser iterados o tener datos asociados, los Union Types son generalmente la opción más eficiente y limpia.
• Para conjuntos de constantes que necesitan ser iterados, mostrados en interfaces de usuario, o que tienen metadatos asociados ricos (como etiquetas, iconos o permisos), el patrón de Const Assertions es superior.
• Combinando para Legibilidad e Internacionalización: Muchos equipos utilizan as const para los identificadores internos y luego derivan etiquetas de visualización localizadas de un sistema de internacionalización (i18n) separado.

            // src/constants/order-status.ts
const OrderStatuses = {
  PENDING: "PENDING",
  PROCESSING: "PROCESSING",
  SHIPPED: "SHIPPED",
  DELIVERED: "DELIVERED",
  CANCELLED: "CANCELLED",
} as const;

type OrderStatus = typeof OrderStatuses[keyof typeof OrderStatuses];

export { OrderStatuses, type OrderStatus };

// src/i18n/en.json
{
  "orderStatus": {
    "PENDING": "Pending Confirmation",
    "PROCESSING": "Processing Order",
    "SHIPPED": "Shipped",
    "DELIVERED": "Delivered",
    "CANCELLED": "Cancelled"
  }
}

// src/components/OrderStatusDisplay.tsx
import { OrderStatuses, type OrderStatus } from "../constants/order-status";
import { useTranslation } from "react-i18next"; // Ejemplo de biblioteca i18n

interface OrderStatusDisplayProps {
  status: OrderStatus;
}

function OrderStatusDisplay({ status }: OrderStatusDisplayProps) {
  const { t } = useTranslation();
  const displayLabel = t(`orderStatus.${status}`);
  return <span>Status: {displayLabel}</span>;
}

// Uso:
// <OrderStatusDisplay status={OrderStatuses.DELIVERED} /

            

              
                Copy
              
            
          

Este enfoque híbrido aprovecha la seguridad de tipos y la iterabilidad en tiempo de ejecución de as const, al tiempo que mantiene separadas y manejables las cadenas de visualización localizadas, una consideración crítica para las aplicaciones globales.

Patrones Avanzados y Consideraciones

Más allá del uso básico, tanto los union types como las const assertions se pueden integrar en patrones más sofisticados para mejorar aún más la calidad y la mantenibilidad del código.

Uso de Type Guards con Union Types

Al trabajar con union types, especialmente cuando la unión incluye tipos diversos (no solo literales), los type guards se vuelven esenciales para reducir los tipos. Con los tipos de unión literales, las uniones discriminadas ofrecen un poder inmenso.

            type SuccessEvent = { type: "SUCCESS"; data: any; };
type ErrorEvent = { type: "ERROR"; message: string; code: number; };

type SystemEvent = SuccessEvent | ErrorEvent;

function handleSystemEvent(event: SystemEvent) {
  if (event.type === "SUCCESS") {
    console.log("Data received:", event.data);
    // event ahora está restringido a SuccessEvent
  } else {
    console.log("Error occurred:", event.message, "Code:", event.code);
    // event ahora está restringido a ErrorEvent
  }
}

handleSystemEvent({ type: "SUCCESS", data: { user: "Alice" } });
handleSystemEvent({ type: "ERROR", message: "Network failure", code: 503 });

            

              
                Copy
              
            
          

Este patrón, a menudo llamado "uniones discriminadas", es increíblemente robusto y seguro en cuanto a tipos, proporcionando garantías en tiempo de compilación sobre la estructura de sus datos basándose en una propiedad literal común (el discriminador).

Object.values() con as const y Type Assertions

Al usar el patrón as const, Object.values() puede ser muy útil. Sin embargo, la inferencia predeterminada de TypeScript para Object.values() puede ser más amplia de lo deseado (por ejemplo, string[] en lugar de una unión específica de literales). Es posible que necesite una aserción de tipo para mayor rigurosidad.

            const Statuses = {
  ACTIVE: "Active",
  INACTIVE: "Inactive",
  PENDING: "Pending",
} as const;

type StatusValue = typeof Statuses[keyof typeof Statuses]; // "Active" | "Inactive" | "Pending"

// Object.values(Statuses) se infiere como (string | "Active" | "Inactive" | "Pending")[]
// Podemos asegurarlo de forma más restrictiva si es necesario:
const allStatusValues: StatusValue[] = Object.values(Statuses);

console.log(allStatusValues); // ["Active", "Inactive", "Pending"]

// Para un menú desplegable, podría emparejar valores con etiquetas si difieren
const statusOptions = Object.entries(Statuses).map(([key, value]) => ({
  value: key, // Usar la clave como el identificador real
  label: value // Usar el valor como la etiqueta de visualización
}));
console.log(statusOptions);
/*
[
  { value: "ACTIVE", label: "Active" },
  { value: "INACTIVE", label: "Inactive" },
  { value: "PENDING", label: "Pending" }
]
*/

            

              
                Copy
              
            
          

Esto demuestra cómo obtener una matriz fuertemente tipada de valores adecuada para elementos de interfaz de usuario mientras se mantienen los tipos literales.

Internacionalización (i18n) y Etiquetas Localizadas

Para aplicaciones globales, la gestión de cadenas localizadas es primordial. Si bien los enums de TypeScript y sus alternativas proporcionan identificadores internos, las etiquetas de visualización a menudo deben separarse para i18n. El patrón as const complementa maravillosamente los sistemas de i18n.

Define sus identificadores internos e inmutables usando as const. Estos identificadores son consistentes en todos los locales y sirven como claves para sus archivos de traducción. Las cadenas de visualización reales luego se obtienen de una biblioteca de i18n (por ejemplo, react-i18next, vue-i18n, FormatJS) según el idioma seleccionado por el usuario.

            // app/features/product/constants.ts
export const ProductCategories = {
  ELECTRONICS: "ELECTRONICS",
  APPAREL: "APPAREL",
  HOME_GOODS: "HOME_GOODS",
  BOOKS: "BOOKS",
} as const;

export type ProductCategory = typeof ProductCategories[keyof typeof ProductCategories];

// app/i18n/locales/en.json
{
  "productCategories": {
    "ELECTRONICS": "Electronics",
    "APPAREL": "Apparel & Accessories",
    "HOME_GOODS": "Home Goods",
    "BOOKS": "Books"
  }
}

// app/i18n/locales/es.json
{
  "productCategories": {
    "ELECTRONICS": "Electrónica",
    "APPAREL": "Ropa y Accesorios",
    "HOME_GOODS": "Artículos para el hogar",
    "BOOKS": "Libros"
  }
}

// app/components/ProductCategorySelector.tsx
import { ProductCategories, type ProductCategory } from "../features/product/constants";
import { useTranslation } from "react-i18next";

function ProductCategorySelector() {
  const { t } = useTranslation();

  return (
    <select>
      {Object.values(ProductCategories).map(categoryKey => (
        <option key={categoryKey} value={categoryKey}>
          {t(`productCategories.${categoryKey}`)}
        </option>
      ))}
    </select>
  );
}

            

              
                Copy
              
            
          

Esta separación de responsabilidades es crucial para aplicaciones globales escalables. Los tipos de TypeScript aseguran que siempre esté utilizando claves válidas, y el sistema de i18n se encarga de la capa de presentación según la configuración regional del usuario. Esto evita tener cadenas dependientes del idioma incrustadas directamente en la lógica principal de su aplicación, un antipatrón común para equipos internacionales.

Conclusión: Potenciando sus Decisiones de Diseño en TypeScript

A medida que TypeScript continúa evolucionando y capacitando a desarrolladores de todo el mundo para construir aplicaciones más robustas y escalables, comprender sus características y alternativas matizadas se vuelve cada vez más importante. Si bien la palabra clave enum de TypeScript ofrece una forma conveniente de definir constantes nombradas, su huella en tiempo de ejecución, las limitaciones de tree-shaking y las complejidades de mapeo inverso a menudo hacen que las alternativas modernas sean más atractivas para proyectos a gran escala o sensibles al rendimiento.

Union Types con Literales de Cadena/Numéricos destacan como la solución más ligera y centrada en el tiempo de compilación. Proporcionan una seguridad de tipos sin concesiones sin generar ningún JavaScript en tiempo de ejecución, lo que los hace ideales para escenarios donde el tamaño mínimo del paquete y el máximo tree-shaking son prioridades, y la enumeración en tiempo de ejecución no es una preocupación.

Por otro lado, Const Assertions (as const) combinadas con typeof y keyof ofrecen un patrón muy flexible y potente. Proporcionan una única fuente de verdad para sus constantes, una sólida seguridad de tipos en tiempo de compilación y la capacidad crítica de iterar sobre los valores en tiempo de ejecución. Este enfoque es particularmente adecuado para situaciones en las que necesita asociar datos adicionales con sus constantes, poblar interfaces de usuario dinámicas o integrarse perfectamente con sistemas de internacionalización.

Al considerar cuidadosamente las compensaciones – huella en tiempo de ejecución, necesidades de iterabilidad y complejidad de los datos asociados – puede tomar decisiones informadas que conduzcan a un código TypeScript más limpio, eficiente y mantenible. Adoptar estas alternativas no se trata solo de escribir TypeScript "moderno"; se trata de tomar decisiones arquitectónicas deliberadas que mejoren el rendimiento, la experiencia del desarrollador y la sostenibilidad a largo plazo de su aplicación para una audiencia global.

Potencie su desarrollo en TypeScript eligiendo la herramienta adecuada para el trabajo correcto, yendo más allá del enum predeterminado cuando existen mejores alternativas.