Understanding 'as const' (const assertions) in TypeScript

# Understanding 'as const' in TypeScript

When using as const in TypeScript, we can set the properties of an object or the elements of an array to readonly, indicating to the language that the type in the expression will not be widened (e.g. from 42 to number).

Copied!
function sum(a: number, b: number) {
  return a + b;
}

// 👇️ const arr: readonly [3, 4]
const arr = [3, 4] as const;

console.log(sum(...arr)); // 👉️ 7

We created a sum function that takes 2 numbers as parameters and returns the sum.

This is when you would use a const assertion in TypeScript.

# Declaring a const array in TypeScript

The const assertion enables us to tell TypeScript that the array's type will not be widened, e.g. from [3, 4] to number[].

The array in the example becomes a readonly tuple, so its contents cannot be changed and we can safely unpack the two numbers in a call to the sum function.

If you try to change the contents of the array, you will get an error.

Copied!
function sum(a: number, b: number) {
  return a + b;
}

// 👇️ const arr: readonly [3, 4]
const arr = [3, 4] as const;

// ⛔️ ERROR: Property 'push' does not exist on type 'readonly [3, 4]'
arr.push(5);

We used a const assertion, so the array is now a readonly tuple whose contents cannot be changed and attempting to do so causes an error during development.

If we try to call the sum function without using a const assertion, we would get an error.

Copied!
function sum(a: number, b: number) {
  return a + b;
}

// 👇️ const arr: readonly [3, 4]
const arr = [3, 4];

// ⛔️ Error: A spread argument must either have a tuple
// type or be passed to a rest parameter.
console.log(sum(...arr)); // 👉️ 7

TypeScript warns us that there is no way of knowing that the arr variable hasn't changed between its declaration and the time the sum() function was called.

# Declaring a const object in TypeScript

You can also use const assertions as a replacement for enums if you don't like using TypeScript's enum construct.

Copied!
// 👇️ const Pages: {readonly home: '/'; readonly about: '/about'...}
export const Pages = {
  home: '/',
  about: '/about',
  contacts: '/contacts',
} as const;

If you try to change any of the properties of the object or add a new property, you would get an error.

Copied!
// 👇️ const Pages: {readonly home: '/'; readonly about: '/about'...}
export const Pages = {
  home: '/',
  about: '/about',
  contacts: '/contacts',
} as const;

// ⛔️ Error: Cannot assign to 'about', because it is
// a read-only property
Pages.about = 'hello';

// ⛔️ Error: Property 'test' does not exist on type ...
Pages.test = 'hello';

# Const assertions don't make an object or array fully immutable

It should be noted, however, that const contexts do not convert an expression to be fully immutable.

Copied!
const arr = ['/about', '/contacts'];

// 👇️ const Pages: {readonly home: '/', menu: string[]}
export const Pages = {
  home: '/',
  menu: arr,
} as const;

// ✅ Works
Pages.menu.push('/test');

The menu property references an external array, whose contents we are able to change.

If the array was defined in place on the object, we wouldn't be able to change its contents.

Copied!
// 👇️ const Pages: {readonly home: '/', readonly menu: string[]}
export const Pages = {
  home: '/',
  menu: ['/about'],
} as const;

// ⛔️ Error: Property 'push' does not exist on type
// 'readonly ["/about"]'
Pages.menu.push('/test');

I've also written an article on how to change a readonly property to mutable.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• A spread argument must either have a tuple type or be passed to a rest parameter
• Dynamically access an Object's Property in TypeScript
• How to Add a property to an Object in TypeScript
• This expression is not callable. Type 'X' no call signatures
• 'this' implicitly has type 'any' error in TypeScript [Fixed]