Create an Event Type

[00:00:00]
>> Anjana Vakil: All right, so we've got a few squiggles down and 12 more to go Now we have some more regular TypeScript complaints like these implicit any And as usual, this means we need more types, we need to declare our types I had to type for events An event probably makes sense So if this is an event, similarly to our little toy examples earlier, we probably want to make an event type

[00:00:37]
Wait a minute, I didn't say anything about an event type Why is TypeScript not complaining that it can't find the type that I made Let's hover and find out The event interface represents an event which takes place on an event target What the crap are you talking about Let's click on the MDN Okay, we're talking about like a browser event, like a click event or a touch event or whatever kinds of events

[00:01:13]
So this is a built-in, not exactly built-in, but a type that is related to the wider web ecosystem of JavaScript and it's related to the DOM model, the document object model that JavaScript's idea of what kinds of things it can talk to in the browser And so we saw earlier we had things like an HTML element or various other DOM specific stuff and there happens to be an event type that has nothing to do with our like meetups events kind of type

[00:01:53]
So this is where sometimes we get into these kind of, similar to how you might have variable naming collisions and things like that in different scopes, we can also have, we can declare an event type here that is different from what TypeScript would otherwise infer we mean when we type capital E event Okay, so in case you ran into that of like why does it magically know the type I have in mind

[00:02:28]
It doesn't It has no idea It thinks you're talking about a browser event Okay, so let's talk about the real event type that we want Could you walk me through how you made it I did not finish it, but that's okay we'll do it together So I'm actually trying to do a single types file Is that, you're talking about scopes earlier, is this the same like when we have like an event type, can we override it in other files as well

[00:02:55]
We're going to talk a lot more about like where to put types and where to get types and how we move them around shortly So for now, let's just talk about like the type itself and what it looks like, but that's a great question that we're totally going to come back to Okay, so I think the syntax is, it's type event equals, right Okay, so we can do type event equals, and then I'm still working on it

[00:03:23]
Give it a kind of like an objecty thing Sure, that's legit, we can do that, or interface instead Or we could use an interface And again, just to recap, they are very similar in many ways, but one of the cool things about interfaces is their kind of extendability and there's a few like performance benefits to using interfaces, probably not in this codebase, but in general

[00:03:55]
So in this case, since, in general, if we have an objecty type, it's fine to use an interface, we'll just do it in that syntax Okay, cool, great, thank you so much for getting us started Now let's figure out together Did other folks start defining an event interface as well I'm seeing we got one in the chat Fabulous ID is a number ID number is a string

[00:04:20]
Title is a string Description is an optional string And is this feeling familiar Yep, date is a string, uh huh ID is a number Host ID is a number Image underscore URL is an optional string String And then there are host and RSVP properties as well This person defined them as an object, okay, kind of a nested object here versus a custom type

[00:04:59]
We can have a nested object inside of our interfaces We can have a property in the interface or key in the interface that has a, has more keys inside of it, its value, so sure, what kind of things is host expecting to see ID number ID And then a name string Yeah Email string And then that was it for that, and then there was one more property, RSVPs, RSVPs, which they defined as also kind of a nested object, but an array of these objects

[00:05:44]
Ah, okay, so let's first pretend that RSVPs is just going to be one object And what did it have on it ID number, name string, and an email string, okay Great Now, we said it's RSVPs So if we wanted to say, okay, it's not just one of these objects, but it's a whole array of them, how could we do that In TypeScript we have a syntax where we can tell TypeScript, I want an array of this type of thing

[00:06:23]
The square brackets after it, yeah, the square brackets after it And you could put like parentheses if that made you feel better I think it's going to figure out without it, but let's find out Okay Was that the end of the interface Awesome, awesome Thank you so much Now, did anybody else have a slightly different approach Yeah, I was going to say I noticed that you have the IDs spelled differently, so one is two capital

[00:07:01]
I don't know if those are supposed to be different things or not, so interesting, yes, so We do indeed have a squiggle here because there is a capital ID And it's like, did you mean lower case ID Or should there be another property that's capital ID And sure enough, this is just a deliberate, I promise, typo, so that we can catch it, because this is the kind of thing that JavaScript, I'm not going to worry about

[00:07:36]
What is JavaScript going to make Form ID Since there is no capital ID property on an event object, when this is running What is the form ID going to evaluate to So object object or undefined If we have a property that was never defined on an object, we're going to get undefined, but because it's in a string template, that undefined is then going to be part of our string

[00:08:14]
It's going to stringize, it's going to convert undefined as if it were the string undefined, and it's going to insert that in our string template here and we're going to get Form ID RSVP Form undefined, which is not the idea So indeed, this was a tricky misspelling here, which this is the whole value of having typed objects where we can be sure that we're not accidentally writing console.ggo or language that creates or whatever ID when it's really supposed to be ID, so we could fix that now in our code and hopefully down an error, yay

[00:09:06]
Excellent Just to go back to our interfaces here, or interface or event interface, did anybody have anything different There are lots of different ways that we could structure our types here So I'm just curious if anybody did take a different approach I used the date built-in value instead of string Okay, so there is a date type in JavaScript that we could use here

[00:09:43]
And if we change that, let's see if we find anything else going on Oh, that's not where I'm meant to search for that So here, for example, we can see that we're calling the date constructor on this date But TypeScript has no idea what e.date is going to be because e implicitly has an any type So how can we fix that Define as a date, correct

[00:10:31]
E Or, is it a, yeah, I was going to do the second line, but I guess that might not be Well, so here we have essentially just a slightly different parameter name for a similar signature here So e is going to be, actually, if we look at the kinds of things that we're trying to call on e here, they look pretty familiar as properties of an event

[00:11:11]
So we can type this function parameter as an event And now, we no longer get the implicit any because TypeScript knows what type we want because we were explicit with our type annotation Now whether exactly what type we want this date property to have, we can explore as we go But so far, everything is satisfied, regardless of whether we have date on the event type be a string or a date type, because the date constructor, if we hover over it, TypeScript says, I know what kinds of things the date constructor can take in as its value

[00:12:06]
And it could be a string, or it could be a number, or it could be a date So if you give me a string as a date, date's happy, TypeScript's happy If you give me a date as the date, date's happy, TypeScript happy So we're starting to get to see that like even with these very JavaScript like bog standard, vanilla JavaScript, zero TypeScript notions like date, like new date, TypeScript can give us helpful information about what kinds of things these take

[00:12:43]
And this is all coming from, again, the kind of built-in type declarations that TypeScript has for the built-in features of JavaScript because the beating heart of TypeScript is always JavaScript for now But the idea here is that again, this is leveraging that idea of declarations, of type declarations It's just that in this case, all of the built-ins in JavaScript, those declarations come with TypeScript

[00:13:16]
So we didn't have to install any extra types We didn't have to add anything to our types array in our tsconfig.json because TypeScript already knows what a date is out of the box.