We have now taken a look at using typescript with react when it comes to props, state and even handlers,
but we've taken a look at all three of these different topics around function components.
So in this video, we're going to go over these three same topics, but in the world of Class-Based
components instead.
Now, if you are not interested in Class-Based components, no problem.
Just pause a video right here and continue on to the next one.
Otherwise, stick around and we'll get to it better.
Understand how state props and events work with Class-Based components.
And TypeScript, we're going to recreate our user search component, but we're going to recreate it
as a class based component.
Instead, we're going to go over all three those different topics inside this video.
So we've definitely got a lot of work cut out for us.
And this will be a long video.
So let's start writing out some code right away to get started inside of my SIRC directory.
I'm going to make a new folder called Classes.
And then inside there I'll make a new file of user search DOT TSX.
Inside, if you're all put together some boilerplate for a very simple Class-Based component, so something
like import component.
From React.
Then class user search extends component of an export default user search at the bottom.
OK, so we want our component, our Class-Based version of this to be pretty much identical to the existing
user search, but I'm going to put in one new requirement.
I'm going to say that our Class-Based version of user search is going to receive this list of users
as a prop rather than just have it be hard coded inside of your.
That means we need to somehow tell typescript that we expect our component to receive an array of user
objects, so let's figure out how we tell TypeScript about the different props we expect our component
to receive to do so right above my component.
I'm going to define an interface of user search props inside there.
I'm going to say that I expect to receive a user's array.
That's going to be an array of objects, I should say, users property.
There will be an array of objects and every object will have.
A name that is a string.
And an age that is a number I'll make sure I put in square brackets right after that object, which
means, again, this is going to be an array of objects.
Then to associate this prop interface right here with our component, right after the word component,
I'm going to put an angle brackets and then user.
Search groups like so.
Now, anywhere inside of our component, let's say maybe inside of a render function, we could refer
to this drug users and if you mouse over that, you'll notice that the type is applied correctly to
it.
So that's how we deal with props and we need to figure out how to do something very similar with state
as well.
There are two different ways of handling state declarations or essentially typing them inside of a class
based component.
The first way is pretty easy and straightforward.
We could put in state equals an object and then put in some default values for our state right here.
So I might put in for our state number, our original user search had name and user.
So I might put in a name as a string right there and started off as empty string, if you add that in,
then anywhere else inside of your component, you can refer to this state name and once again, correctly
interpreted as being a string.
But remember, in addition to name, we had one other piece of state which was user, so assigning this
inside of our state object right here is going to make things just a little bit more difficult.
So in this case, I'm going to put in user.
With an initial value of undefined and then we're going to apply a type declaration or an invitation
to our state object right here.
We could definitely write this in line, so something like that.
But to make it a little bit cleaner, we might decide to define a separate interface at the top of the
file to describe our state object and then annotate it right there.
And that's what I'm going to do in this case.
I'm going to put in interface user search state.
I'm going to say that our state object is going to have a name that is a string and a user that is going
to be either an object with a name that is a string and an age that is a No.
Or undefined.
We can then apply that interface right there as a manual annotation.
Then if we tried to refer to this state name or this dot state user down inside of the render function,
so this dot state dot name still works as expected.
I can mouseover that.
And I'm told it's a string.
I can also take a look at user.
And if I mouseover that, I'm told it is either a user object or undefined.
That's pretty much it.
Now, one thing I want to point out just very quickly here, you'll notice that we now have two separate
declarations of this user type across these two different interfaces.
So one thing that is not required, but we might decide to do just to clean up our code a little bit,
we could define a third interface for user up here and say that a user must have a name that is a string.
And an age that is a number and then use that interface in place of these manual or literal type definitions
so I could replace that with user.
And her place down here.
With user as well, so, again, just cleans things up a little bit.
OK, that looks pretty good now to really finish up our implementation.
I'm going to go back over to our user search function component.
I'm going to go down to our jazz block, I'm going to copy all that.
Go back over to a render function, put in a return statement and return all that Jesus.
We do have to clean up a couple of references inside of here really quickly, so first off, for our
input, we will update name to this state dot name.
Are unchanged, function will be updated to this dot set state.
Name to Target, not value, I'm going to save that as you can see it more easily.
We'll come back and handle unclick in just a moment and then finally for user, we can make this this
user and this dot state user name, or alternatively, as you could guess, we could do a little bit
of cleanup here.
We could structure off of state up here.
So we could say contact user is this state, we could actually do the same thing for name and save a
reference for our input value as well.
So we might do a name and user.
We can then input or update the input value to just name.
And then down in our and statements down here, it would be exactly what we had before, just user and
and then user and.
OK, so very last thing, our unclick function, once again, we could define a method.
Of unclick.
Inside of user search.
I'm going to go back to where unclick, I'm just going to copy all that logic once again and paste it
into unclick.
So then in place of users right here, we would want to look at this stop, stop, stop users.
We need to make sure we clean up the reference to name right there, so this state not name.
And then rather than doing our set user, it would be at this set state user to found user.
One last very small gotcha here, remember, as soon as we go into the world of class components, we
have to worry about the context of callback functions.
So in this case, UNCLICK is a callback function and we are passing it off to this button on click prop
right here.
So whenever unclick is invoked, the value of this inside there is probably going to show up is undefined
or definitely something unpredictable.
So to solve that, we would want to find unclick as an arrow function.
It's all put in unclick equals zero function like so, and that would solve the context issue.
Then finally down at our button, it would be this dot on click.
And that should be it now I'll leave it up to you to test this, because all I really want to show you
was the typescript aspects.
The big takeaways here is that to associate some props with a component, we could define the same kind
of interface we did with our function component.
And then whenever we define our class based component, we'll put in the component based class angle
brackets and our props interface right there.
And then four states, we can either rely upon type inference from typescript or alternatively, if
we need to be more precise on the type we would put in our state.
Our definition for the state interface and then the actual initialization object for it.
All right, so that's pretty much it.
Well, let's take a pause right here and move on in the next video.