Using Const Assertion in TypeScript, A Guide to Making Your Code More Reliable

TypeScript is a strongly typed superset of JavaScript that adds features such as static type checking, classes, interfaces, and more. One of the lesser known features of TypeScript is the const assertion syntax, which allows you to make a variable or property read-only at compile time.

What is const assertion?

Const assertion is a feature of TypeScript that lets you specify that a value is a literal value instead of a variable that can be reassigned. This means that the value of the variable cannot be changed at runtime, and TypeScript can optimize your code accordingly.

In other words, const assertion is a way to tell the TypeScript compiler that a variable or property should be treated as a constant, even though it may not be declared as such.

How does const assertion work?

Const assertion works by adding a as const assertion at the end of a variable or property declaration. This tells TypeScript that the value of the variable should be treated as a constant literal, rather than a mutable value.

For example 📄

// Array
const colors = ["red", "green", "blue"];

//If we want to make the colors array read-only, 
//we can use const assertion like this:

const colors = ["red", "green", "blue"] as const;

Practical examples of const assertion

Example 1: Enumerations

or example, let’s say we have an enumeration called Direction that defines four possible directions: Up, Down, Left, and Right. We can define this enumeration using const assertion like this:

const Direction = {
  Up: "UP",
  Down: "DOWN",
  Left: "LEFT",
  Right: "RIGHT",
} as const;

Example 2: Arrays and tuples

const assertion can also be used with arrays and tuples to make them read-only. This can be useful when you want to ensure that an array or tuple is not modified after it is initialized.

For example, let’s say we have an array called fruits that contains a list of fruit names:

const fruits = ["apple", "banana", "orange"] as const;

Using const assertion with arrays and tuples can be particularly useful when working with functions that expect a specific set of input parameters or return types. For example, we can define a function called getFruit that takes an index parameter and returns a fruit name from the fruits array

function getFruit(index: number): string {
  return fruits[index];
}

In this case, TypeScript will infer that fruits is a constant array of string literals, and will prevent us from accidentally modifying the array or passing in an invalid index value to the getFruit function.

Example 3

Suppose we have a function as follows:

function foo(x: number, y: number, z: number) {
  console.log(x + y + z);
}

This is how we want to use it:

const args = [1, 2, 3];
foo(...args);

While such a thing is quite common in JavaScript, in TypeScript we may be surprised that the compiler does not allow us to do such a thing:

The compiler says that when we use the Spread operator here, we must make sure that the number of arguments returned to the foo function is exactly as required by this function, that is, exactly 3.

While the args array is subject to change and its number may add or remove. Even if we use the Readonly type

To fix this error, just do the following:

const args = [1, 2, 3] as const;
foo(...args);

Const assertion is a powerful feature of TypeScript that allows you to make variables and properties read-only at compile time. This can help you write more efficient, reliable, and bug-free code ✨

By using const assertion effectively in your TypeScript code, you can improve your development workflow, catch errors earlier in the development process, and make your code more readable and maintainable in the long run. ❤️