How let and const Work In TypeScript

How you declare your variables in TypeScript affects whether or not they can be changed.

#

How TypeScript Infers let

When using the let keyword, the variable is mutable and can be reassigned.

Consider this AlbumGenre type: a union of literal values representing possible genres for an album:

type AlbumGenre = "rock" | "country" | "electronic";

Using let, we can declare a variable albumGenre and assign it the value "rock". Then we can attempt to pass albumGenre to a function that expects an AlbumGenre:

let albumGenre = "rock";

const handleGenre = (genre: AlbumGenre) => {
  // ...
};

handleGenre(albumGenre);
Argument of type 'string' is not assignable to parameter of type 'AlbumGenre'.2345
Argument of type 'string' is not assignable to parameter of type 'AlbumGenre'.

Because let was used when declaring the variable, TypeScript understands that the value can later be changed. In this case, it infers albumGenre as a string rather than the specific literal type "rock". In our code, we could do this:

albumGenre = "country";

Therefore, it will infer a wider type in order to accommodate the variable being reassigned.

We can fix the error above by assigning a specific type to the let:

let albumGenre: AlbumGenre = "rock";

const handleGenre = (genre: AlbumGenre) => {
  // ...
};

handleGenre(albumGenre); // no more error

Now, albumGenre can be reassigned, but only to a value that is a member of the AlbumGenre union. So, it will no longer show an error when passed to handleGenre.

But there's another interesting solution.

#

How TypeScript Infers const

When using const, the variable is immutable and cannot be reassigned. When we change the variable declaration to use const, TypeScript will infer the type more narrowly:

const albumGenre = "rock";

const handleGenre = (genre: AlbumGenre) => {
  // ...
};

handleGenre(albumGenre); // No error

There is no longer an error in the assignment, and hovering over albumGenre inside of the albumDetails object shows that TypeScript has inferred it as the literal type "rock".

If we try to change the value of albumGenre after declaring it as const, TypeScript will show an error:

albumGenre = "country";
Cannot assign to 'albumGenre' because it is a constant.2588
Cannot assign to 'albumGenre' because it is a constant.

TypeScript is mirroring JavaScript's treatment of const in order to prevent possible runtime errors. When you declare a variable with const, TypeScript infers it as the literal type you specified.

So, TypeScript uses how JavaScript works to its advantage. This will often encourage you to use const over let when declaring variables, as it's a little stricter.