Check out a free preview of the full TypeScript 3 Fundamentals, v2 course:
The "Type Systems & Object Shapes" Lesson is part of the full, TypeScript 3 Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Mike introduces type systems, explains what object shapes are, and goes on to put the types in a hiearchy to explain how objects can be identified as more specific or broader types.

Get Unlimited Access Now

Transcript from the "Type Systems & Object Shapes" Lesson

[00:00:00]
>> Mike North: The next thing we're going to talk about is a little five-minute description of type systems. And how you can tell the difference and take advantage of the difference between something like TypeScript and something like Java. So, type systems come down to this question of type equivalents. And that is the same thing we were looking at when we saw some error messages that related to the left-hand and the right-hand of an assignment, right?

[00:00:29] That's TypeScript trying to figure out is this value you're trying to assign equivalent to this type of the variable you're assigning it to. And the same thing happens when you're trying to pass an argument to a function. Just think of it like an object trying to pass through a hole.

[00:00:46] You want the square peg passing through a square hole as appropriate. So really, it's about can we regard x as an HTMLInputElement? Nominal type systems, like Java and almost every typed language out there, they would answer the question based on whether x is an instance of a class named whatever the type you're looking for.

[00:01:14] So this would require you to have all of your code set up in a fairly object-oriented way where you have constructors. And you're dealing primarily with instances of classes and you're passing things around. This isn't necessarily how JavaScript code is written. And this would require us to do a lot of rewriting and to make almost everything a class and an instance in order to have factories with specific names.

[00:01:41] So that we could take advantage of types.
>> Mike North: TypeScript is a structural type system, they only care about the shape of an object. Which is property names and types that are allowed for those properties, right? So it only cares about the structure of an object. So, if we had like a data structure for a car, we could call it car.

[00:02:04] But really, all we care about is the fact that it has properties called make, model and year that are of the appropriate types. Same goes for functions. We really only care about the arguments and the return type. And if you create a totally different function that meets those criteria, that will end up being type equivalent.

[00:02:26] That will be usable where you need that type to be used. And I should point out that this is an important concept to understand in TypeScript. But also if you have consistent shapes in JavaScript. And you avoid introducing new properties to objects that have been heavily used. You end up having a better shot at JavaScript run times, like V8 optimizing your code.

[00:02:56]
>> Mike North: TypeScript uses the term wider and narrower to describe a level of specificity. And you'll no doubt come across someone who uses wider, narrower, and I'm gonna start using these terms today. But here is the diagram to help you understand what we mean by this. The widest type is any and it allows for any possible value.

[00:03:23] And just think of it as the set of allowed values for any is infinitely wide. It can just take absolutely anything, it’s almost infinity. Now, if I said, I want an array, any array at all. I don't care what type of value is in this array, that would be a narrower type, right?

[00:03:41] We're not infinitely wide anymore. The set of values, if you line them up end to end, it would be narrower, still pretty wide though. And we could get even more specific and say this array can be of arbitrary length, but it must only contain strings. And then you could say, but it must be of length three.

[00:04:00] But those strings can be anything at all. And then we could get narrower still by being very specific about what certain strings these values might be. Now if we had a function that could operate on any array. We could look at the array type, and anything below it, anything narrower than that will be fine to use, it's just more specific.

[00:04:26] We can always regard an array of three strings that must remain of size three. We can always regard that as an arbitrary array of strings, or as an array of anything, or as any value, right? So narrower values can always fit through the wider hole. That's the way I kind of think of this.

[00:04:46] But if you wanted to have specifically an array of strings, and you had an array of any, you'd have to find a way to narrow that type. And to validate that only the correct thing fits through. So this is what we mean by wider and narrower. Wide is very general, narrow is extremely specific.

[00:05:07] We run into this never type when we were initializing an array with an empty array. Never is infinitely narrow, it literally can hold no value. I mean, it can hold a never, but it is like circular reasoning, right? You think of it like there is no hole, nothing can really pass through.

[00:05:30] It is nothing and impossible, or unreachable, think of it that way