Server TypeScript Files Exercise

[00:00:00]
>> Anjana Vakil: So let's take a moment and see if we can grab some of those types that we defined earlier, whether in our frontend or in some of the other exercises You can copy paste, you can rewrite it, whatever you'd like to do Let's make some types in our backend, type some variables, type some functions, and hopefully make TypeScript happy Earlier we were writing types kind of in the places where we were using them

[00:00:38]
But what you'll often see is types being defined in their own area in the codebase For example, instead of going into events where we have all of these any event values, and before in our frontend, we were kind of declaring our types here, you know, writing our interfaces here, etc This time we're going to, we've got other things like in users, we need some user info and so on and so forth

[00:01:11]
What we're going to do this time in our source directory is make a new file where we will write all of our types And we could call this file types, for example, or whatever you'd like, but types is often a useful name for it because it's where the types are going to go Oh, and it wants me to generate the code, but I'm going to be a human and write it myself

[00:01:40]
So, what we can do is start writing some types in one place and then using them in another place But first of all, let us think about the types that we want here Did folks take a moment to look at the codebase and again, we've been working with this app a little bit, we've been getting a little bit of a sense of what kinds of stuff is floating around, and I would motion that we make a few different interfaces and perhaps some other types that those interfaces need to represent the kind of main entities that we're dealing with here

[00:02:18]
Does that sound good Sounds great Did y'all do something similar in your thinking about this or starting to write it out OK So, what types would we like to have We mentioned that in events.ts there's like this event, event, event, and sure enough in our other, in our frontend, we saw that we do need an event type for working with an app that is all about going to events, so let's make an interface event

[00:02:54]
OK, now, before we fill that out, let's think about what else we need I can put a little, I love to leave myself to-dos everywhere Well, we have users here, so I feel like maybe a notion of what a user is might be useful Does that sound good We're going to need an event which, you need a user interface which I assume nobody is talking to me because everybody is busy writing out their interfaces, which is excellent

[00:03:29]
OK, we'll do that one Anything else that we might need in this app RSVP Uh-huh, OK, so we had something, we have this notion of like RSVPs as being a thing that we want to have, like, users can go to events They can say that they're going to go to events They can RSVP to events, so we have a notion of like this user will be at this event OK Or maybe not this user, but someone will be at this event

[00:04:05]
OK, interface RSVP or all caps or however you want to spell it These are our types, we get to define them All right, shall we start giving these some properties And at this point we're getting kind of used to this, right So, let's see, our event has stuff like We can copy and paste from our frontend, that sounds like a great idea Components events Is that where it was

[00:04:40]
OK, we're going to split this up a little bit, but this will be a great starting point Go back to my backend types and let us, OK, we've got an event that is now, we're going to split it out a little bit So for example, this host thing That looks pretty user-y to me, yeah OK, so what if instead of inlining that host object, because now we want to maybe be able to work with the user type, independent of the event type

[00:05:22]
Like, for example, making a user in our app So if I now go back here and I copy paste my properties into my user interface, I now have a user type that I can reference as one of the properties' hosts here is going to be a user Cool Similarly, I could do the same with RSVPs And here we had an array So, a single RSVP is going to be what the shape that we want to define

[00:06:00]
But in our event objects, we're going to want an array of RSVPs because hopefully, more than one person is coming to my party Although maybe not Let us now make sure that RSVP is meaningful by giving it some properties And now we have three adorable little types, interfaces Did anybody have thoughts or questions or ways we could, I mean, we could do all kinds of things here

[00:06:40]
We can make more ID types, we could make, you know, changes to this, and we might need to, depending on how our code runs, we might find out that there's discrepancies between, you know, something supposed to be optional or not supposed to be optional, what have you But at this point, we're getting used to figuring out how to shape a type as we need it But what we need to do now is figure out how to get these types where they need to be.