Unlocking Literal Types in TypeScript with "as const"

Deep Dive into as const

Ever declared a constant in TypeScript and wondered why its type widened to stringinstead of "blue"? That’s where as const comes in.

💡Context

By default, TypeScript widens literal values. This can make union types and prop definitions less strict. The as const assertion prevents widening, preserving exact literal types and making objects/arrays readonly at the value level.

💡Intro

In React projects, as const is handy for config objects, tuple-like arrays, and state actions. It enforces immutability while improving type safety.

💡Why Use This?

• Prevents type widening ("blue" vs string).
• Makes arrays/objects deeply readonly.
• Critical for discriminated unions.

💡Without as const

// Without as const const color = "blue"; type Color = typeof color; // type is string 

💡With as const

// With as const const color = "blue" as const; type Color = typeof color; // type is "blue" 

💡Real Life Use Cases

Component Props

const buttonVariants = ["primary", "secondary"] as const; type Variant = typeof buttonVariants[number]; type ButtonProps = { variant: Variant }; function Button({ variant }: ButtonProps) { return <button>{variant}</button>; } 

Config Objects

const theme = { mode: "dark", accent: "blue", } as const; // Types are "dark" | "blue", not string 

💡Remember: as const is for values, not type definitions.