Typing Details & Context Components

[00:00:00]
>> The next one down here results this one here, so here we're gonna say with use query we're gonna tell it what kind of query that it's going to give back to us. So this gives you back a pet API response what's cool about this is now we can look at results and what is results gonna be.

[00:00:18]
It's going be a use query result where inside of it we know that there's already a PET API response which is cool. Okay, awesome, What are you mad about? The unknown must have a symbol iterator method that returns an iterator. Okay, okay, so we do have to change this from disable next line to typeScript -eslint-no-unused-var.

[00:00:58]
That'll save us from one error vars there we go that's good. And underscores SetPopAdoptedPet useContext AdoptedPetContext unsafe assignment of any var. Well let's keep going, with that, I don't have a note to fix that, that's fine,replace the pet declaration down here, object is possibly undefined, that's fine. So we can be a little bit more guarded about that if we use these accessor methods here if we put question marks, so now pet can potentially be either pet or undefined and then again, we can throw an error here if there is no pet.

[00:01:55]
So if there's no pet, then throw new error no pet lol okay here we go. I was up here is that what it's mad about is this U state, it's just mad that I haven't probably typed this AdoptedPetContext that's exactly what it's mad about. Okay, we're fine so it's still gonna be mad about this because we're pulling stuff in from AdoptedPetContext.

[00:02:32]
This is going to end up being an any so it thinks this underscore here is an any in our TypeScript or not our tsLint is actually mad as like, hey, you told me you promised me you told me that I cannot have anys. And I'm mad at you for giving me an any so we're actually not gonna be able to fix this file quite yet.

[00:02:51]
We're gonna have to go type our context first before we can come back and say this is error free. So you should see one here the set right because this is gonna be an any and this is gonna be in any and we'll go fix that later which is fine we expect that last thing here I told you down here we'd have to fix this later.

[00:03:12]
We're passing props through blindly I still stand by that. I think this is a good idea and we could go type this so that it continues to happen but the easiest thing to do here is we have no props being passed down, right? We're not reading props at all in details so this is effectively a no op here, so we can just delete it.

[00:03:36]
And that fixes that type okay you're still gonna get a bunch of errors up here because it's like error boundary is not typed yes I know that you don't have to yell at me about that I know that it's not typed, but we'll get there this is exactly what a TypeScript migration is like is like why is that an error right?

[00:03:54]
You just keep asking yourself over and over again and you just figure it out kind of on the fly it's just like dance with the TypeScript compiler. Having done this a few times, it's very much that. The more you do this though, the less you fight with the compiler.

[00:04:16]
But I will say going from like 10% of your code base in TypeScript to like 60% of it in TypeScript is misery. Because you're getting lots of type errors and you don't know why and you're not sure is it actually an error or is it just TypeScript being finicky?

[00:04:33]
But once you're like 80% TypeScript, especially when you're at 100% TypeScript, it's just incredibly useful. But I'm just gonna tell you getting their sucks like a lot. [LAUGH] You're gonna ask yourself what am I doing with my life that brought me to this point right? [LAUGH] Like I, I just I should go back to being a barista that was so much easier.

[00:04:56]
That was so much better TypeScript broke me anyway. Let's go fix AdoptedPetContext.js so make this a.ts Instead of a sub js. We're gonna import pet from dot slash API response types. This we're gonna have to be a lot more specific with create context. So let's just go ahead and do that we're gonna tell it that it has either a Pet type and then it's gonna be an adoptedPet function that returns a Pet, Sorry, an adoptedPet which takes in as a parameter and returns void.

[00:05:53]
Okay, and then you have to like it just gets mad you have to give it a default value or else it's going to be mad because by default this is gonna be created without it. So let's just go ahead and do that we're going to give it a basically a fake looking hook.

[00:06:15]
So we have to give it a pet and has to satisfy the pet type. So just make like make up a pet right here with me name: ''Fido''; animal I mean, it's pretty cool, right? It's auto completing this for us, right? Then, which I think that's pretty cool.

[00:06:35]
This is the stuff that I love about TypeScript is it just knows that an animal it has to be an animal type. And so therefore, my VS code is auto completing stuff for me. Okay, I'm going to say that I need a description it autocompletes that lorem ipsum Breed: "Beagle", images: you can just give it an empty array, City: Put whatever you want here.

[00:07:09]
I'll just put Seattle State: ''WA'' and then give it here just an empty function and that will satisfy the AdoptedPetContext. So you might ask like what is this actually for like why do I give it this like default value if you create the context without a context provider above it this is what's going to be stored in it.

[00:07:36]
Which you should never do right you would never do that where this actually can be useful is you can actually no write tests for this AdoptedPetContext. And you don't have to wrap it in some provider, right? That would be the very limited use case where it's actually useful that we do provide it here some sort of default value.

[00:07:58]
The other thing you could have done here is you could have just said or null, cuz you can store like null here maybe if you wanted to. And then here what we could have done is instead of this, we could have just given it null and that would've satisfied it as well.

[00:08:14]
It's totally up to you how you choose to handle that. I like taking that null out of here because now this really can't be null and then I don't have to check everywhere if it's null or not. So, I'm gonna leave that up to you how you choose to do that okay.

[00:08:35]
Okay so this is where the TypeScript dash one milestone was it wasn't the last one now it is. So if you're wanna catch up here you can just copy and paste TypeScript dash one or not copy and paste, but just take the whole folder