Understand how TypeScript infers literal types

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

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.

More Tips