"as const" in TypeScript: Saving Your Code from Silly Mistakes

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

Introduction: Why Does Your TypeScript Code Behave Strangely?

Have you ever written something like this in TypeScript:

const direction = 'left';// ... and then TypeScript said it's a string, not 'left'?

Sound familiar? This is one of the most common pitfalls that even experienced developers fall into. Today, we'll break down a powerful tool that solves this problem once and for all — as const.

The topic of this article is based on a real Stack Overflow question that has gathered thousands of views: "What does the 'as const' mean in TypeScript and what is its use case?". We adapt this question for educational content, add live examples, and show how as const in TypeScript helps avoid silly mistakes.

Ready? Let's go!

What is as const in TypeScript in Simple Terms?

as const is a special construct (const assertion) that tells TypeScript: "Hey, don't widen the type! Freeze this value as a literal." In other words, you forbid TypeScript from inferring a more general type (e.g., string) and force it to use the exact value.

The Problem Without as const

Look at this simple example:

// Without as constconst role = 'admin'; // TypeScript infers type: 'admin' (because of const)let userRole = 'admin'; // TypeScript infers type: string (because of let)

// Now an array:const roles = ['admin', 'user', 'guest']; // TypeScript infers: string[]

When you use let or an array, TypeScript "widens" the type to a more general one. This makes sense: a variable can change, an array can mutate. But in 90% of cases, you need the exact value!

The Solution with as const

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

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

Now TypeScript knows the exact literals. No more string or number — only specific values. That's the magic of as const in TypeScript.

Top 5 Mistakes When Working with as const (And How to Avoid Them)

Even knowing what as const is, developers often make the same mistakes. Let's break them down with real cases.

Mistake #1: Trying to Modify a Readonly Object

When you use as const, the object or array becomes readonly. Trying to modify it will cause a compilation error.

Bad:

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

How to avoid:

If you need a mutable array, don't use as const. Or use a copy:

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // Now it's a regular arraymutableColors.push('yellow'); // Works

Mistake #2: Forgetting About Nested Objects

as const works recursively — it makes all nested properties readonly. Many people forget this.

Example:

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

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

How to avoid:

If you need to modify only part of an object, use a shallow as const or use partial types.