00:00 In this section, we're going to start looking at external libraries with React and TypeScript, and we're going to start with React Hook Form. Now, what we're looking at here is a form library that is immensely popular in TypeScript and React, and it's really popular for client-side form handling especially.

00:18 So in this form here, we've got a useForm function which is being extracted from React Hook Form, and then this creates a form, and we pass it some default values. We don't have to pass it anything, actually. It doesn't require anything to be passed to it.

00:33 But the default values that we do pass to it, they get inferred in a little slot just up here, and then they get then used throughout the rest of this form's lifecycle. So this form, we can see that it has a handleSubmit method on it, and that then receives a function which is typed with the values

00:52 that we just passed into the default values up here. So if we add like a middle name up here, then this gets added to the values here because it's assumed that when this form is submitted, this default value will be on that type. Down here, we've got register functions, which basically pass in a bunch of props that you can spread to this input here.

01:13 And so we've got form.registerFirstName, form.registerLastName, and these are type-safe too. Very, very, very nice stuff. Your job here, the first job, is to try to figure out why that's happening, how this gets inferred here by doing some finding definition stuff and going through there.

01:29 The next step is I want you to look at what happens when you don't pass anything. Then form, instead of being inferred as this nice type here, useFormReturnWithFirstNameLastName, it's actually just useFormReturnWithFieldValues. So your second job is to work out what type FieldValues is.

01:47 And you notice too that we don't get any kind of inference on FirstNameLastName here, which is a bit sort of sad, really. So your third exercise after that is once you've understood this, then we need to understand how we can possibly change this line of code here

02:05 in order to make sure that it understands that values are not FieldValues, but our actual form values that we put up here, so FirstName and LastName. So form values is literally just this type down here. And we need to make sure that the things that we're registering here are actually part of FirstName and LastName, and don't, for instance, have MiddleName on them.

02:25 So that's your job, is to first work out how this is actually working, how this inference even works, how this understands that it's a useFormReturnWithFirstNameLastName in. Second is to understand what happens when you don't pass the default values in. And third is to understand how to actually force it

02:43 to understand that your default values are what you think they are. Good luck.