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

After talking about nominal type and structural type systems for checking if two types are the same, Mike reviews object shapes, which are the names of properties and types of their values.

Get Unlimited Access Now

Transcript from the "Object Shapes" Lesson

[00:00:00]
>> Mike North: So when we talk about type equivalence, imagine we have a function called validate input field and we pass it an input field or I should say, we expect to receive an input field in this function. And then when we're trying to use this, we have some variable x that we're trying to invoke this function.

[00:00:22] And then in a strongly typed programming language, we're basically trying to answer a question that has to do with type equivalents. Can we regard this thing that you have tried to pass to this function as an html input element? In a nominal type system like C++ or Java, we would answer this question based on whether this X is an instance of the class that we have named, right?

[00:00:52] Is this an instance of that class? Did we call new HTML input element or did something do something equivalent somewhere? So that is a nominal type system. You have to have the right name. Structural type systems only care about the shape of the object. This is how typescript works.

[00:01:14] It is extremely convenient for us in the JavaScript world because when we talk about this name here HTMLInputElement, we're really just talking about a name for a particular structure. Anything that matches that structure should be fine.
>> Mike North: So in thinking about the shapes of objects, we just mean the names of their properties and the types of the values that those properties can have, not the values themselves but just the types.

[00:01:48] So in this case, it we've got a car with make, model, and year, make is a string, model's a string, year is a number, we would say that is the shape of this object. And we can use this shape in the same way that we've been using primitive types in the type annotation.

[00:02:05] So we can do something like this. Let's imagine for visual purposes that that's a star. And what we want is to make something that will sort of, like fully, imagine that this is sort of like a hole, and we want to fully cover the hole. We wanna plug the hole appropriately.

[00:02:26] So if we've got a hole that looks like this, we can create something that exactly plugs that hole, right? The make is a string. The model is a string. The year is a number and that's gonna work just perfectly.
>> Mike North: So we can think of the shape as a set of minimum requirements for structure or requirements for structure.

[00:02:50] And if the properties are missing, the compiler's going to be unhappy with you. So in this case, we are missing the year of property, and so our shape does not quite cover the whole, and so you'll end up with an error of sorts.
>> Mike North: Excess properties are fine, think about this as covering the whole, and then some.

[00:03:13] So in this case, we've added color in addition to all of the things that are being asked for, and that's fine. That'll cover it.