Understanding ‘As Const’ In TypeScript – How to do It?

Sometime you might feel weird with ‘as const’ syntax and don’t know what it is. Don’t worry. In this article, I will help you know about the topic “understanding ‘as const'” in TypeScript. Let’s go into detail.

Understanding ‘as const’ in TypeScript

You might think about ‘as’ in a syntax like ‘Type assertions’. Here ‘as const’ syntax is const assertions, introduced in Typescript 3.4. With const assertions, your expression will become cannot widen. And object literals will get readonly properties, and array literals will become readonly tuples.

Example for ‘as const’ in Typescript:

const animalList1 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
];

const animalList2 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
] as const;

If you hover over animalList1 you will see something like this:

const animalList1: (string | number | {
 greet: string;
 })[]

Because I am treating animalList1 like an array, Typescript will show me all types I can pass into that array.

With animalList2 array will be:

const animalList2: readonly [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    {
        readonly greet: "Hello";
    }
];

It is because, with const assertions, I set the animalList2 array to become constant, then it will become readonly tuples, and Typescript will show us exactly what I put into the array as the type. So that difference between having a general type and having exactly what we pass in something will be very helpful when you want to see what you passed in the variable. When I try to re-assign to greet properties set to readonly, I will get an error.

Example:

const animalList1 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
];

const animalList2 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
] as const;

animalList2[6].greet = "Hi";

The error:

Cannot assign to 'greet' because it is a read-only property.
animalList2[6].greet = "Hi";

Or when I try to change the array using the push() method.

Example:

const animalList1 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
];

const animalList2 = [
    1,
    2,
    3,
    "Blue Whale",
    "Cats",
    "Common Octopus",
    { greet: "Hello" }
] as const;

animalList2.push("turtle");
console.log(animalList2);

The error:

Property 'push' does not exist on type 'readonly [1, 2, 3, "Blue Whale", "Cats", "Common Octopus", { readonly greet: "Hello"; }]'.
animalList2.push("turtle");

Summary

In this article, I showed you a method for understanding ‘as const’ in TypeScript. The ‘as const’ syntax will make your expression becomes a readonly tuple, and you cannot widen or change it.

Maybe you are interested:

• How To Initialize And Type A Map In Typescript
• How To Get An Enum Key By Value In Typescript
• How To Disable Type Checking For A Line In Typescript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm