User Types

[00:00:00]
>> Anjana Vakil: Let us hop over to users and then we'll come back and fix some of those other errors So now we've got similar problems Now, this time, if I start just typing an annotation here I haven't imported any of my types yet But if I do a colon ID here, luckily there is no name collision with like a built-in JavaScript thing And so TypeScript is able to be like, hey, oh, are you talking about that ID type that you just put in your types module

[00:00:37]
And so if I now press tab, not only does it like the type here, but it actually added the entire import statement, import type statement for me So this is again we're now leveraging all kinds of tooling under the hood here We've got VS Code and TypeScript working hand in hand to look at all my code and figure out where the types are and guesstimate what I'm trying to do as I'm typing

[00:01:05]
Yeah, question Yeah, I was just going to see, so like you're bringing in the type of ID, but like what would be the benefit of doing that over bringing in the type of user and then doing like a pick user ID for the ID so that it knows it's a user ID rather than just an ID That is a really great question So what we had done here is we took one approach to getting an ID type that we can work with, but there's a whole bunch more

[00:01:36]
And so, for example, we saw pick, that is one way to get kind of a subtype out However, there is another way that we can get an individual property from within an interface like this and get the type of that So one way that we could have done this, like for our events, we could say, OK, we have an ID and that's just like any kind of ID and maybe it shows up in events, maybe it shows up in RSVPs, who knows

[00:02:07]
However, another thing that we could do is say, hey, we've already got this user thing and the user thing has this ID, and that is what we want in our users file We don't want just any ID or like maybe a more general type, a wider type We want the user ID and there is a way that we can do that in TypeScript So first of all, I need to export this And then now I can import, let's say instead of ID, I import type user

[00:02:41]
Now, of course, TypeScript does not know what I'm talking about And here it, did it autocomplete Oh, it's just complaining that I haven't actually used this yet Now, if I were to say that this is a user, I would be lying But TypeScript doesn't know I'm telling it what the type is But what I really want to do is to say this is the type of the ID property on the user type

[00:03:12]
And there is a syntax we can use in TypeScript that's a little bit similar to like if we had a user object that was a user and we wanted to say like ID one, whatever, and then of course it's going to complain because it's missing all of the other stuff, then later I could do dot I, blah blah blah That works with JavaScript objects, the dot notation, however in TypeScript, we can do, I'm just going to give it an alias for so that we see it on this one line

[00:03:49]
Let's say I make a type that's user ID We can drill into an interface in a similar way using different syntax So we can use angle brackets, much like if we were trying to get a property out of an object, we can also use this syntax where we then inside the angle brackets and I opened a string and VS Code and TypeScript together collaborated to give me all of the keys that exist on this type

[00:04:30]
In a similar way that like we can access objects by index in an array or by property name in an object, we can access types on an object type with this angle brackets and then the name, the key that I want for that property This is what's called index access types if you're looking for jargon And essentially what this does is it goes to user and it finds the ID and it sees that it's a number

[00:05:11]
And that is the type And so now I could use this type alias here, or I could forget about the type alias and just inline this into where I actually need it, if I'm not going to be reusing this user ID all over the place But so this is a great question because this is going to be something that does come up and there's a few other ways that we could, let's say differentiate between the ID for a user and the ID for an event

[00:05:45]
For example, generic types are sometimes used for that That's, you know, we're getting more advanced, but like how are we going to make sure that we know that this is a user ID and it has to be the set of numbers that might be user, blah blah blah blah Again, all of this you will find down the rabbit hole or the void that we stare into when we stare into TypeScript

[00:06:08]
But this way of doing this sort of index access types can be very handy for drilling into those subtypes Now, just really quickly, yes Now, just really quickly, earlier we looked at the utility types like pick And so if I had used pick here and we, since that's generic, we could give it a user, and then we give it the name or like the keys, perhaps multiple, that we want to pick out of a user

[00:06:47]
But there is a difference between the picked user ID that I'm going to define here and the user ID that we just had before Does anybody spot the difference I'll write out the other one just so we have them next to each other Like not actually go through the user So they're both looking at the user type to understand what is happening here But if I hover over user ID, I see it's a number

[00:07:22]
And if I hover over picked user ID Is it still a number No, one's an object It's a structure It's more, it's like a sub-interface basically, a sort of So the pick here is for like I want kind of an object that's a subset sort of of another, whereas the index access is like I want that one value or that one type for that value If that makes sense So it's a great intuition and we could even get real obnoxious with ourselves, our future selves, and do stuff like index into the properties of the picked user, but we're not going to do that because we like to not have our brains explode

[00:08:15]
But excellent question and highlights a difference between using the utility types like pick and omit and index access to get individual types of keys on an interface or an object type Awesome Excellent questions, and now we have even more syntax in our TypeScript tool belt So much syntax, so many brackets of different shapes OK, now we have a whole bunch of other like things that might be coming out

[00:08:59]
So for example, out of our database, which we're talking to using this better-sqlite3 library, which we installed types for and so TypeScript knows about And so now we've got some other stuff going on, and we're going to get back to that in a moment But suffice it to say, what we're starting to see here is how we can really build up these reusable types We can drill into them, we can extend them, we can widen them and narrow them as needed

[00:09:35]
We can even import and export them so that we don't have to keep redefining the event interface 8 million times like I've been making you do You're welcome But we are starting to get a sense of how we're going to be just like in a JavaScript codebase We're going to be thinking about like the modular types of how I'm breaking up my code, what I'm putting where, how reusable it is, when it makes sense to redeclare something or it doesn't

[00:10:03]
Again, we're doing software development It's just that now we're working with types that don't exist when JavaScript runs as opposed to objects and functions and all that other good stuff So the question of like best practices for organizing massive TypeScript projects is an excellent question that Mike North has a lot more to say about.