«as const» en TypeScript: salvando tu código de errores tontos

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción: ¿Por qué tu código TypeScript se comporta de forma extraña?

¿Alguna vez has escrito algo como esto en TypeScript?

const direction = 'left';// ... y luego TypeScript decía que era string, no 'left'?

¿Te suena? Es una de las trampas más comunes en las que caen incluso desarrolladores experimentados. Hoy analizaremos una herramienta poderosa que resuelve este problema de una vez por todas: as const.

El tema de este artículo se basa en una pregunta real de Stack Overflow que ha acumulado miles de visitas: "¿Qué significa 'as const' en TypeScript y cuál es su caso de uso?". Adaptamos esta pregunta para contenido educativo, añadimos ejemplos prácticos y mostramos cómo as const en TypeScript ayuda a evitar errores tontos.

¿Listo? ¡Allá vamos!

¿Qué es as const en TypeScript en palabras sencillas?

as const es una construcción especial (aserción const) que le dice a TypeScript: «Oye, no amplíes el tipo. Congela este valor como un literal». En otras palabras, le prohíbes a TypeScript inferir un tipo más general (por ejemplo, string) y lo obligas a usar el valor exacto.

El problema sin as const

Mira este ejemplo simple:

// Sin as constconst role = 'admin'; // TypeScript inferirá el tipo: 'admin' (porque es const)let userRole = 'admin'; // TypeScript inferirá el tipo: string (porque es let)

// Y ahora un array:const roles = ['admin', 'user', 'guest']; // TypeScript inferirá: string[]

Cuando usas let o un array, TypeScript «amplía» el tipo a uno más general. Es lógico: una variable puede cambiar, un array puede mutar. Pero en el 90% de los casos, ¡necesitas el valor exacto!

La solución con as const

const roles = ['admin', 'user', 'guest'] as const;// TypeScript inferirá: readonly ["admin", "user", "guest"]

const config = {  api: 'https://api.example.com',  timeout: 5000} as const;// TypeScript inferirá:// {//   readonly api: "https://api.example.com";//   readonly timeout: 5000;// }

Ahora TypeScript conoce los literales exactos. Nada de string o number, solo valores concretos. Esa es la magia de as const en TypeScript.

Los 5 errores principales al trabajar con as const (y cómo evitarlos)

Incluso sabiendo qué es as const, los desarrolladores suelen cometer los mismos errores. Analicémoslos con casos reales.

Error nº1: Intentar modificar un objeto readonly

Cuando usas as const, el objeto o array se vuelven readonly. Intentar modificarlos provocará un error de compilación.

Malo:

const colors = ['red', 'green', 'blue'] as const;colors.push('yellow'); // ¡Error! La propiedad 'push' no existe en el tipo 'readonly [...]'

Cómo evitarlo:

Si necesitas un array mutable, no uses as const. O usa una copia:

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // Ahora es un array normalmutableColors.push('yellow'); // Funciona

Error nº2: Olvidar los objetos anidados

as const funciona de forma recursiva: vuelve readonly todas las propiedades anidadas. Muchos lo olvidan.

Ejemplo:

const theme = {  colors: {    primary: '#007bff',    secondary: '#6c757d'  }} as const;

theme.colors.primary = '#000'; // ¡Error! No se puede asignar a 'primary' porque es una propiedad de solo lectura.

Cómo evitarlo:

Si necesitas modificar solo una parte del objeto, haz un as const superficial o usa tipos parciales.