Arrays & Objects

[00:00:00]
>> Anjana Vakil: So now we've got the tools, and by tools I mean the colon, to add types to variables when we declare them and functions Now we're going to need a few more types than just primitives and literals For example, in JavaScript we have arrays, and we work with arrays a lot And in TypeScript, if we put the array brackets after another type, that tells TypeScript, this is an array of numbers

[00:00:45]
So this is some new syntax that doesn't look very JavaScript-y, although maybe in the WAT JavaScript world, perhaps But still we have a colon and a type name It's just that if we want an array type, we can use these brackets after the type of thing that elements in the array are allowed to be So this is sort of equivalent to saying, digits is an array that only contains numbers

[00:01:18]
So if I push another number, no problem If I push a string, problem And likewise, we could make a string array, which will only ever accept string values inside of it And if we try to push a number or an object representing JavaScript or whatever, TypeScript will complain Even though JavaScript really does not care, JavaScript will make you an array out of whatever you want

[00:01:48]
If you keep pushing stuff, it's got no problem And so just to prove to you that I'm not lying, we can run this in the playground and see that indeed we get errors And this is saying, hey, push needs to take the same kind of item or items as this array is supposed to contain And so this is how we can make sure that we don't do things like push undefined, where we expected a string to be in an array of messages we want to log or something like that

[00:02:37]
And as you might expect, if we can work with types for arrays, we also can work with types for objects And the syntax for types of objects is very similar to the syntax for JavaScript objects So here, what we have is a type annotation that says this variable user is type everything that's after the colon And the type itself with these curly brackets says this is an object

[00:03:16]
And then for each of the properties that that object is supposed to have, instead of providing a value like Anjana, we provide in the type definition the type of the value So here, what we've got, I want to be able to assign an object like this with this shape to my user variable So I add a type annotation that tells TypeScript, this is the shape of the object that I want

[00:03:54]
It's got a name property, and that name property has a value that is a string And it's got an ID property and that ID property can only hold a value that is a number And so let's move into the playground Once I type this variable, and if I hover over it here, we'll see that TypeScript just indents it more nicely TypeScript knows that this variable has these exact keys and exactly what types of values they're allowed to hold

[00:04:46]
And so I can change the name, let's say I can change the ID as long as it's a number and as long as it's a string, TypeScript's fine with that But as soon as I start to add a value that is not matching the shape of the object that I described, we get an error So for example, if I try to null out the name, no go, because type null is not assignable to type string

[00:05:25]
And TypeScript, no That name on a user has to be type string because you told me a couple lines ago And similarly, if I try to assign a string where a number is supposed to go, also an error And if I try to use properties that don't exist in the shape that I told TypeScript to expect for this object, I didn't mention anything about a color property

[00:05:55]
And so sure enough, it says, hey, you told me that the type of this object looked like this, it has a name property and an ID property, and the property color does not exist But if I wanted it to, I can add it to my type definition and now no problem It's there Of course, if I were to tell it that it's something else, wrong value type

[00:06:30]
So what happens with prior non-conforming values if you were to change ID to a different type and then now you have an existing array that has types that are not conforming with the new type Like if you're going to progress the array, like let's say like a year after using it, right, how would you navigate an existing type that you've had in place

[00:06:50]
Does that make sense I'm just thinking of like a data structure here where like I have a database downstream and I'm going to progress them in my application because I need to like a new version of an array How would I navigate like the type side of that So is this, just to rephrase the question, is the question sort of how do we evolve these types as we need to over time

[00:07:16]
Yeah, and so that is a good question and it is going to be something that we explore when we talk about like composing types together and customizing our types There are ways that we can do things like, for example, add optional parameters, for example, like if I put color here Did anybody notice something else happened other than this line got fixed

[00:07:50]
Broke your user Ah, it broke line two Property color is missing You gave me this object that you said was supposed to have this shape, and it does not have that shape It is missing one of those properties just like before, or as the converse of before, it said, hey, that property doesn't exist Stop trying to put it in this object

[00:08:18]
Now it's saying, hey, you've missed something And now it's going to require me to add a color value But a new little bit of syntax that looks similar to JavaScript but works kind of different, if I put a question mark before the colon, what that tells TypeScript is this property is optional, meaning it might be undefined So if we go back to our example here and I add a question mark after that color

[00:09:08]
Now user without a color, totally fine User with a color, totally fine So if we look at name, we see that it's a string If we look at ID, we see that it's a number, no surprises so far If we hover over color, we see that pipe operator again and we see that this could be a string or undefined And so, for example, to maintain backwards compatibility, for example, with like data that might be coming from a different part of the code, we can use things like optional properties and other ways we can create our custom types as we need to, but optional properties is kind of one way that you could do that

[00:09:56]
Like if you've added new properties, but they don't exist on all of the objects, optional However, then you have to remember that sometimes color might be undefined Now, luckily, if I'm going to take that line out So if I have user here, it should be, yeah, may or may not have the color If I do user.color.toUpperCase Oh TypeScript knows

[00:10:35]
Hey, whoa Yeah, color might be a string, but it also might not be there at all And so you can't just assume that you're going to have a string property method on this color, so we might need to do something like make sure that we don't try to call that method if it's undefined, that's just JavaScript, but suffice it to say we've added undefined as one of the possibilities here, and that means that the rest of our code has to take that into account

[00:11:12]
So, these are all, we just worked through these examples with different values But this is how we allow for more flexible object types.