Understanding and Using the "as const" Keyword in Typescript

Table of Contents

• Introduction
• Understanding the as const keyword
• Conclusion

Introduction

In Typescript, type inference is powerful, but sometimes we need more control over the types in our code. This is where the as const keyword comes in. By using as const, we ensure that Typescript treats our values with specific types, preserving and using their exact value instead of generalising them. In this article, we'll explore how the as const keyword works and how it can enhance your development with Typescript

Understanding the as const keyword

Typescript uses broader types when inferring the type of a value. For example, when you declare a variable with a string, Typescript will infer the type as string, rather than the exact string value you assigned. However, using the as const, you are telling Typescript to treat the value as a constant.

Let's look at some basic array examples

let message = "Hello, world!"; // Typescript infers type as "string"

const messageOne = "Hello, world!"; // Typescript infers type as "Hello, world!"

const messageTwo = "Hello, world!" as const; // Typescript infers type as "Hello, world!"

Note: The type inferred from the const messageOne variable is Hello, world! rather than the general string type because constants in Typescript already have their types inferred as the exact value assigned.

The difference becomes more evident when you use as const in contexts like arrays or objects where Typescript would generally infer more generic types.

const colors = ["red", "green", "blue"];// Typescript infers type as string[]

// Method One
const exactColors: ("red" | "green" | "blue")[] = ["red", "green", "blue"]; // type inferred as ["red", "green", "blue"]

// Method Two: using `as const` keyword
const exactColorsTwo = ["red", "green", "blue"] as const; // type inferred as ["red", "green", "blue"] 

Well Method One is a valid way of telling Typescript to be specific with the type, but assume there were like a hundred types, it will be tedious and error-prone to type them out. Method Two is what we're going to be using moving forward.

Let's see a screenshot of the type inferred on the Method Two example above in VS code:

The array in the screenshot is readonly meaning we cannot change the value of the array by adding or deleting elements to or from it.

As shown in the screenshot above, it further emphasizes that the array is readonly, preventing any additions or deletions of elements.

Now let us try to access values in the arrays defined above using their indexes

const arrayResult = colors[0] // type is inferred as "string"
const arrayResultOne = colors[1] // type is inferred as "string"

const result = exactColorsTwo[0]; // type is inferred as  "red"
const resultOne = exactColorsTwo[1]; // type is inferred as "green"

Now let us use a basic object example
Below is a gif showing typescript inferring the type of an object

We can see from the above that before the addition of the as const keyword, the inference from typescript was generic(i.e string) but on adding the as const keywords, the type became more specific as seen in the illustration above

On adding the as const keyword, we also saw the readonly keyword which prevents us from modifying the original reader object.

We can take it a step further by trying to access a property in the reader object and see the type being inferred

Let's now see another example of using the as const keyword with Template literals

In the example above, hovering over the myMeal variable gives us the Union of all the possible outputs the myMeal variable can possibly have.

Now instead of logging what the output might look like in the function, we can hover over the myMeal variable and see what it looks like.

Conclusion

In this article, we have learnt about the as const keyword in typescript. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

What are your thoughts on this article? Feel free to share your thoughts in the comments section below.