«as const» no TypeScript: salvando o código de erros bobos

Introdução: Por que seu código TypeScript está se comportando de forma estranha?

Você já escreveu algo assim no TypeScript:

const direction = 'left';// ... e então o TypeScript disse que era string, e não 'left'?

Familiar? Esta é uma das armadilhas mais comuns em que até desenvolvedores experientes caem. Hoje vamos explorar uma ferramenta poderosa que resolve esse problema de uma vez por todas — as const.

O tema deste artigo é baseado em uma pergunta real do Stack Overflow que acumulou milhares de visualizações: "O que significa 'as const' no TypeScript e qual é o seu caso de uso?". Adaptamos essa pergunta para conteúdo educacional, adicionamos exemplos práticos e mostramos como as const no TypeScript ajuda a evitar erros bobos.

Prontos? Vamos lá!

O que é as const no TypeScript em palavras simples?

as const é uma construção especial (const assertion) que diz ao TypeScript: "Ei, não expanda o tipo! Congele este valor como um literal". Em outras palavras, você proíbe o TypeScript de inferir um tipo mais genérico (por exemplo, string) e o força a usar o valor exato.

O problema sem as const

Veja um exemplo simples:

// Sem as constconst role = 'admin'; // TypeScript inferirá o tipo: 'admin' (por causa de const)let userRole = 'admin'; // TypeScript inferirá o tipo: string (por causa de let)

// Agora um array:const roles = ['admin', 'user', 'guest']; // TypeScript inferirá: string[]

Quando você usa let ou um array, o TypeScript "expande" o tipo para um mais genérico. Isso é lógico: a variável pode mudar, o array pode sofrer mutação. Mas em 90% dos casos, você precisa exatamente do valor exato!

A solução com 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;// }

Agora o TypeScript conhece os literais exatos. Nada de string ou number — apenas valores específicos. Essa é a mágica do as const no TypeScript.

Top 5 erros ao trabalhar com as const (e como evitá-los)

Mesmo sabendo o que é as const, os desenvolvedores frequentemente cometem os mesmos erros. Vamos analisá-los com casos reais.

Erro nº1: Tentar modificar um objeto readonly

Quando você usa as const, o objeto ou array se torna readonly. Tentar modificá-los resultará em um erro de compilação.

Ruim:

const colors = ['red', 'green', 'blue'] as const;colors.push('yellow'); // Erro! Property 'push' does not exist on type 'readonly [...]'

Como evitar:

Se você precisa de um array mutável, não use as const. Ou use uma cópia:

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // Agora é um array normalmutableColors.push('yellow'); // Funciona

Erro nº2: Esquecer dos objetos aninhados

as const funciona recursivamente — ele torna readonly todas as propriedades aninhadas. Muitos esquecem disso.

Exemplo:

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

theme.colors.primary = '#000'; // Erro! Cannot assign to 'primary' because it is a read-only property.

Como evitar:

Se você precisa modificar apenas parte do objeto, faça um as const superficial ou use tipos parciais.

Erro nº3: Comparação com e sem as const

Às vezes, os desenvolvedores confundem o comporta