Understand how TypeScript infers literal types

It's really important to get a good mental model for things that the TypeScript compiler does. And, that's especially true for read-only properties. So up top here we've got this age variable. age here is inferred as a number.

So if I reassign age to another number, it's going to work because age is declared with a let and it's saying that age can change over time. Whereas, if I put age as a const, then I can't reassign to it.

So, age instead of just being inferred as a number, it's actually inferred as its literal type as 31 which is really interesting.

I can sort of force this on the let by saying age is 31 and then it gets inferred. And then, if I try to reassign to it, it's not going to let me because 31 is not assignable to type 32.

The same is true for strings too so the constant name "Matt" is actually being inferred as "Matt", but it gets more complicated when you go to arrays and objects.

Even though I'm declaring the tsPeople array as a const, members of the array can be manipulated. So I can say this for instance:

So here it's being declared as string inside the member, whereas if I say as const to tsPeople, I'm not going to be able to reassign to it, and this is now going to be declared as its literal so it's going to be inferred all the way down.

The same is true for objects too. I can say as const and now everything is inferred all the way down.

This is really critical if you want like type checking or you want inference based on the members of the array that you're passing in, or the values of the objects that you're passing in.

Getting this mental model solid is going to help you in a ton of different places.

Transcript

It's really important to get a good mental model for things that the TypeScript compiler does. That's especially true for read only properties. Here, we've got this age property up top here, or variable. Age here is inferred as a number.
[0:00]

If I reassign age here, it's going to work because age is declared with a let. It's saying that this age can change over time. Whereas if I put this as a const, then I can't reassign to it. Age, instead of just being inferred as a number, it's actually inferred as its literal type as 31. Which is really interesting.

I can force this on the let by saying age is 31 and then it gets inferred. Then if I try to reassign to it, then it's not going to let me, because 31 is not assignable to type 32. The same is true for strings too. Name: "Matt" is actually being inferred as Matt.

It gets more complicated when you go to raise an object. Here, even though I'm declaring the array as a string, or rather as const, members of the array can be manipulated. I can say tsPeople [] = "Eddy";. Here, it's being declared as string inside the member.

Whereas if I say it as const;, then first of all, I'm not going to be able to reassign to it. Also, this is now going to be declared as it's literal. It's going to be inferred all the way down. The same is true for objects too.

Here I can say moreTsPeople. Andarist = 'whatever'. In here, I can say as const, and now everything is inferred all the way down. This is really critical. If you want like type checking or you want inference based on the members of the array that you're passing in, or the values of the objects that you're passing in.

This is where TypeScript, getting that mental model really solid is going to help you in a ton of different places.

This mental model is INCREDIBLY useful for all sorts of intermediate-advanced typings:

If TypeScript knows a value can't change, it'll infer it to its literal type.

Discuss on Twitter

More Tips