Hello developers 👋, My name is Md taqui imam, i am a Full Stack web developer, today i will tell you "A Cool TypeScript Feature You Might Not Know About: as const".
So let's start and don't forget to SUBSCRIBE Newsletter 📩 and Connect 🤝 with me in Github and Twitter .
Have you ever worked with types in TypeScript and found yourself wanting more control over how those types behave? Well, there's a handy little feature called as const
that can help with that.
as const
is a way to make type checks stricter by preventing certain operations on a value. For example, let's say we have an array:
const fruits = ['apple', 'banana', 'orange'];
By default, TypeScript sees this as an array that can contain any string. But what if we wanted TypeScript to know that this array will only ever contain these three specific string values?
That's where as const
comes in. By adding it, we make TypeScript treat the array in a more "specific" way:
const fruits = ['apple', 'banana', 'orange'] as const;
Now instead of just being a string[]
, fruits is seen as the specific tuple type ['apple', 'banana', 'orange']
.
This means TypeScript will give us errors if we try to add or remove items from the array. It knows the values are "locked in".
as const
works on other types too. For example, you could mark an object as constant to prevent adding or removing properties:
interface Cat {
name: string;
age: number;
}
const garfield = {
name: 'Garfield',
age: 10
} as const;
Now garfield is seen as an object with very specific fields, rather than a loose Cat interface.
Here are some examples of "as const" :
Here are some more examples of how as const
can be used in TypeScript:
Enum Types
You can make an enum as const
to remove the implicit number types:
enum Colors {
Red,
Green,
Blue
}
let c = Colors.Green; // number
enum ColorsAsConst {
Red,
Green,
Blue
} as const;
let c = ColorsAsConst.Green; // ColorsAsConst.Green
Tuple Types
Mark a tuple as const
to make its types very specific:
let tuple = [1, 'two'] as const;
tuple[0].toFixed(); // OK
tuple[1].toLowerCase(); // OK
Function Return Types
Mark a function return value as const
to narrow its type:
function createError() {
return {message: 'an error'} as const;
}
const err = createError();
err.message = 'something else'; // Error
Object Properties
Objects marked as const
prevent adding/removing properties:
interface Point {
x: number;
y: number;
}
const p = {x: 0, y: 0} as const;
p.z = 0; // Error
So in summary, as const
brings immutability and more precise types to enums, tuples, return values, objects and more!
Conclusion✨
So in summary, as const
is a nifty way to make types more strict and specific in TypeScript. It helps communicate your intent when you want values to be immutable. Give it a try on your next project!
Thankyou for Reading this article💖