iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use as const on an array literal when you want TypeScript to preserve its exact values as a readonly tuple. Then use typeof array[number] to derive a union of those values. A JavaScript const declaration by itself does not make an array immutable.
What does “const array” mean in TypeScript?
The phrase can mean two different things. JavaScript’s const prevents reassignment of a variable binding, but it does not prevent changing the array assigned to it:
const directions = ["north", "south"];
directions.push("east"); // allowedTypeScript infers directions as string[], so its elements can be changed. To preserve the literal values and prevent mutations through that TypeScript reference, add a const assertion:
const fixedDirections = ["north", "south"] as const;
// readonly ["north", "south"]
// fixedDirections.push("east"); // TypeScript errorAs the TypeScript 3.4 release notes explain, array literals asserted with as const become readonly tuples. This is a compile-time type effect, not a runtime freeze: the emitted JavaScript does not gain a runtime immutability guarantee.
#1 Best Overall
How do you derive a union from a const array?
Use typeof to refer to the array’s inferred type, then index that tuple type with number to obtain the union of its element types:
const roles = ["admin", "editor", "viewer"] as const;
type Role = typeof roles[number];
// "admin" | "editor" | "viewer"
function canEdit(role: Role) {
return role === "admin" || role === "editor";
}This keeps the array and the union in sync: adding or removing a literal from roles changes the derived Role type as well. The tuple-indexing pattern is covered by the TypeScript Handbook’s discussion of tuples and readonly arrays.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
How can you validate a const array without widening it?
Combine as const with satisfies when you need TypeScript to check that a value meets a broader contract while retaining its specific inferred type. The satisfies operator was introduced in TypeScript 4.9.
Recommended Free Tools
Check a list of strings
const colors = ["red", "green", "blue"] as const
satisfies readonly string[];The readonly string-array contract is checked, while colors retains its readonly tuple type and individual literal values.
Check structured entries
type Route = { path: `/${string}`; method: "GET" | "POST" };
const routes = [
{ path: "/users", method: "GET" },
{ path: "/users", method: "POST" },
] as const satisfies readonly Route[];Choose this form when both compatibility checking and exact entries matter. A normal type annotation is simpler when the broader declared type is all the code needs and preserving each literal is unnecessary. The TypeScript 5.0 release notes discuss satisfies and its interaction with const-like inference: TypeScript 5.0 release notes.
How can a generic function preserve inline array literals?
In TypeScript 5.0 and later, a const type parameter asks for const-like inference from inline arguments. Make the constraint readonly-compatible so that a readonly tuple can satisfy it:
function first<const T extends readonly unknown[]>(values: T): T[number] {
return values[0];
}
const selected = first(["small", "large"]);
// "small" | "large"A mutable constraint such as string[] can cause inference to fall back to the wider constraint, because a readonly tuple is not assignable to a mutable array. This feature applies to inline literals passed to the generic; it does not recover literal values from a variable that was already inferred as string[]. The TypeScript 5.0 release notes document const type parameters.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesHow should functions accept const arrays?
If a function only reads an array, declare its parameter as readonly T[] or ReadonlyArray<T>. That accepts both mutable arrays and readonly tuples:
Best Value
function printAll(values: readonly string[]) {
for (const value of values) console.log(value);
}
printAll(["north", "south"] as const);A parameter typed as string[] promises that the function may mutate its input, so a readonly tuple cannot be passed to it. If mutation is necessary, either require mutable input or make a copy before changing the data. The TypeScript Handbook describes readonly array types and their relationship to tuples.
Quick Recap
Which pattern should you use?
| Need | Pattern | What it gives you |
|---|---|---|
| Fixed literal entries and their exact types | as const |
A readonly tuple that preserves literal element types |
| A union of a tuple’s element values | typeof values[number] |
A union derived from the tuple members |
| A contract check while retaining specific inferred entries | as const satisfies Contract |
Compatibility checking without replacing the useful narrow type |
| A generic that should infer const-like types from inline literals (TypeScript 5.0+) | const type parameter with a readonly-compatible constraint |
Const-like inference for the generic argument |
| Read-only input that may be dynamic or mutable at the call site | readonly T[] or ReadonlyArray<T> |
An API that accepts both mutable arrays and readonly tuples |
What are the main limits of as const?
- It must be applied while literal values are still available. Applying it to a value already typed as
string[]does not recover which strings were originally present. - It creates a fixed tuple shape. Use a readonly array type instead when length or contents are dynamic.
- It does not freeze the runtime value. TypeScript’s Handbook on basic types and assertions explains that a type assertion does not restructure or specially check the runtime value.
- Readonly values do not fit mutable array parameters. Use readonly parameter types for functions that do not need to change their inputs.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
