1 00:00:00,940 --> 00:00:06,400 We have now taken a look at using typescript with react when it comes to props, state and even handlers, 2 00:00:06,700 --> 00:00:09,840 but we've taken a look at all three of these different topics around function components. 3 00:00:10,150 --> 00:00:14,590 So in this video, we're going to go over these three same topics, but in the world of Class-Based 4 00:00:14,590 --> 00:00:15,570 components instead. 5 00:00:15,910 --> 00:00:19,390 Now, if you are not interested in Class-Based components, no problem. 6 00:00:19,390 --> 00:00:22,150 Just pause a video right here and continue on to the next one. 7 00:00:22,390 --> 00:00:25,030 Otherwise, stick around and we'll get to it better. 8 00:00:25,030 --> 00:00:29,110 Understand how state props and events work with Class-Based components. 9 00:00:29,110 --> 00:00:34,630 And TypeScript, we're going to recreate our user search component, but we're going to recreate it 10 00:00:34,630 --> 00:00:36,040 as a class based component. 11 00:00:36,040 --> 00:00:39,850 Instead, we're going to go over all three those different topics inside this video. 12 00:00:39,850 --> 00:00:41,890 So we've definitely got a lot of work cut out for us. 13 00:00:41,890 --> 00:00:43,020 And this will be a long video. 14 00:00:43,270 --> 00:00:47,920 So let's start writing out some code right away to get started inside of my SIRC directory. 15 00:00:48,040 --> 00:00:50,020 I'm going to make a new folder called Classes. 16 00:00:50,830 --> 00:00:55,600 And then inside there I'll make a new file of user search DOT TSX. 17 00:00:57,310 --> 00:01:02,140 Inside, if you're all put together some boilerplate for a very simple Class-Based component, so something 18 00:01:02,140 --> 00:01:04,239 like import component. 19 00:01:05,300 --> 00:01:06,020 From React. 20 00:01:07,040 --> 00:01:16,670 Then class user search extends component of an export default user search at the bottom. 21 00:01:18,260 --> 00:01:23,900 OK, so we want our component, our Class-Based version of this to be pretty much identical to the existing 22 00:01:23,900 --> 00:01:27,070 user search, but I'm going to put in one new requirement. 23 00:01:27,380 --> 00:01:32,360 I'm going to say that our Class-Based version of user search is going to receive this list of users 24 00:01:32,360 --> 00:01:35,750 as a prop rather than just have it be hard coded inside of your. 25 00:01:36,770 --> 00:01:42,050 That means we need to somehow tell typescript that we expect our component to receive an array of user 26 00:01:42,050 --> 00:01:48,170 objects, so let's figure out how we tell TypeScript about the different props we expect our component 27 00:01:48,180 --> 00:01:51,320 to receive to do so right above my component. 28 00:01:51,830 --> 00:01:56,990 I'm going to define an interface of user search props inside there. 29 00:01:57,000 --> 00:02:00,770 I'm going to say that I expect to receive a user's array. 30 00:02:01,040 --> 00:02:04,160 That's going to be an array of objects, I should say, users property. 31 00:02:04,320 --> 00:02:07,340 There will be an array of objects and every object will have. 32 00:02:08,770 --> 00:02:10,000 A name that is a string. 33 00:02:10,919 --> 00:02:16,380 And an age that is a number I'll make sure I put in square brackets right after that object, which 34 00:02:16,380 --> 00:02:18,930 means, again, this is going to be an array of objects. 35 00:02:20,040 --> 00:02:25,260 Then to associate this prop interface right here with our component, right after the word component, 36 00:02:25,260 --> 00:02:28,440 I'm going to put an angle brackets and then user. 37 00:02:29,520 --> 00:02:31,440 Search groups like so. 38 00:02:33,880 --> 00:02:39,220 Now, anywhere inside of our component, let's say maybe inside of a render function, we could refer 39 00:02:39,220 --> 00:02:45,790 to this drug users and if you mouse over that, you'll notice that the type is applied correctly to 40 00:02:45,790 --> 00:02:46,000 it. 41 00:02:47,780 --> 00:02:51,680 So that's how we deal with props and we need to figure out how to do something very similar with state 42 00:02:51,680 --> 00:02:52,190 as well. 43 00:02:52,940 --> 00:02:57,230 There are two different ways of handling state declarations or essentially typing them inside of a class 44 00:02:57,230 --> 00:02:57,910 based component. 45 00:02:58,430 --> 00:03:00,590 The first way is pretty easy and straightforward. 46 00:03:00,980 --> 00:03:06,920 We could put in state equals an object and then put in some default values for our state right here. 47 00:03:08,170 --> 00:03:13,090 So I might put in for our state number, our original user search had name and user. 48 00:03:14,150 --> 00:03:20,240 So I might put in a name as a string right there and started off as empty string, if you add that in, 49 00:03:20,480 --> 00:03:26,750 then anywhere else inside of your component, you can refer to this state name and once again, correctly 50 00:03:26,750 --> 00:03:28,130 interpreted as being a string. 51 00:03:29,190 --> 00:03:35,550 But remember, in addition to name, we had one other piece of state which was user, so assigning this 52 00:03:35,550 --> 00:03:39,300 inside of our state object right here is going to make things just a little bit more difficult. 53 00:03:39,840 --> 00:03:42,240 So in this case, I'm going to put in user. 54 00:03:43,180 --> 00:03:50,890 With an initial value of undefined and then we're going to apply a type declaration or an invitation 55 00:03:50,920 --> 00:03:52,390 to our state object right here. 56 00:03:53,410 --> 00:03:56,260 We could definitely write this in line, so something like that. 57 00:03:57,530 --> 00:04:01,220 But to make it a little bit cleaner, we might decide to define a separate interface at the top of the 58 00:04:01,220 --> 00:04:04,490 file to describe our state object and then annotate it right there. 59 00:04:04,790 --> 00:04:06,110 And that's what I'm going to do in this case. 60 00:04:06,800 --> 00:04:10,910 I'm going to put in interface user search state. 61 00:04:11,690 --> 00:04:17,360 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 62 00:04:17,360 --> 00:04:22,850 to be either an object with a name that is a string and an age that is a No. 63 00:04:23,890 --> 00:04:25,600 Or undefined. 64 00:04:27,510 --> 00:04:31,350 We can then apply that interface right there as a manual annotation. 65 00:04:34,870 --> 00:04:40,090 Then if we tried to refer to this state name or this dot state user down inside of the render function, 66 00:04:40,450 --> 00:04:43,330 so this dot state dot name still works as expected. 67 00:04:43,330 --> 00:04:44,260 I can mouseover that. 68 00:04:44,260 --> 00:04:45,310 And I'm told it's a string. 69 00:04:45,940 --> 00:04:47,380 I can also take a look at user. 70 00:04:47,410 --> 00:04:51,880 And if I mouseover that, I'm told it is either a user object or undefined. 71 00:04:53,850 --> 00:04:54,650 That's pretty much it. 72 00:04:55,940 --> 00:04:59,750 Now, one thing I want to point out just very quickly here, you'll notice that we now have two separate 73 00:04:59,750 --> 00:05:03,500 declarations of this user type across these two different interfaces. 74 00:05:03,890 --> 00:05:08,210 So one thing that is not required, but we might decide to do just to clean up our code a little bit, 75 00:05:08,450 --> 00:05:15,020 we could define a third interface for user up here and say that a user must have a name that is a string. 76 00:05:16,550 --> 00:05:22,970 And an age that is a number and then use that interface in place of these manual or literal type definitions 77 00:05:23,820 --> 00:05:25,430 so I could replace that with user. 78 00:05:26,300 --> 00:05:27,530 And her place down here. 79 00:05:29,400 --> 00:05:32,580 With user as well, so, again, just cleans things up a little bit. 80 00:05:34,110 --> 00:05:38,530 OK, that looks pretty good now to really finish up our implementation. 81 00:05:38,550 --> 00:05:41,670 I'm going to go back over to our user search function component. 82 00:05:42,640 --> 00:05:45,940 I'm going to go down to our jazz block, I'm going to copy all that. 83 00:05:47,260 --> 00:05:52,500 Go back over to a render function, put in a return statement and return all that Jesus. 84 00:05:53,650 --> 00:05:58,450 We do have to clean up a couple of references inside of here really quickly, so first off, for our 85 00:05:58,450 --> 00:06:01,720 input, we will update name to this state dot name. 86 00:06:03,400 --> 00:06:08,170 Are unchanged, function will be updated to this dot set state. 87 00:06:09,180 --> 00:06:14,640 Name to Target, not value, I'm going to save that as you can see it more easily. 88 00:06:16,820 --> 00:06:22,910 We'll come back and handle unclick in just a moment and then finally for user, we can make this this 89 00:06:23,600 --> 00:06:30,320 user and this dot state user name, or alternatively, as you could guess, we could do a little bit 90 00:06:30,320 --> 00:06:30,980 of cleanup here. 91 00:06:30,980 --> 00:06:33,950 We could structure off of state up here. 92 00:06:34,890 --> 00:06:41,700 So we could say contact user is this state, we could actually do the same thing for name and save a 93 00:06:41,700 --> 00:06:43,920 reference for our input value as well. 94 00:06:44,460 --> 00:06:46,230 So we might do a name and user. 95 00:06:46,800 --> 00:06:49,770 We can then input or update the input value to just name. 96 00:06:50,740 --> 00:06:57,420 And then down in our and statements down here, it would be exactly what we had before, just user and 97 00:06:57,710 --> 00:06:59,260 and then user and. 98 00:07:01,730 --> 00:07:07,490 OK, so very last thing, our unclick function, once again, we could define a method. 99 00:07:08,770 --> 00:07:09,700 Of unclick. 100 00:07:12,290 --> 00:07:13,640 Inside of user search. 101 00:07:14,640 --> 00:07:19,920 I'm going to go back to where unclick, I'm just going to copy all that logic once again and paste it 102 00:07:19,920 --> 00:07:20,820 into unclick. 103 00:07:22,780 --> 00:07:26,500 So then in place of users right here, we would want to look at this stop, stop, stop users. 104 00:07:28,210 --> 00:07:31,690 We need to make sure we clean up the reference to name right there, so this state not name. 105 00:07:32,970 --> 00:07:39,780 And then rather than doing our set user, it would be at this set state user to found user. 106 00:07:41,650 --> 00:07:46,210 One last very small gotcha here, remember, as soon as we go into the world of class components, we 107 00:07:46,210 --> 00:07:48,670 have to worry about the context of callback functions. 108 00:07:48,970 --> 00:07:54,590 So in this case, UNCLICK is a callback function and we are passing it off to this button on click prop 109 00:07:54,610 --> 00:07:55,090 right here. 110 00:07:55,480 --> 00:08:00,280 So whenever unclick is invoked, the value of this inside there is probably going to show up is undefined 111 00:08:00,400 --> 00:08:02,210 or definitely something unpredictable. 112 00:08:02,650 --> 00:08:06,460 So to solve that, we would want to find unclick as an arrow function. 113 00:08:06,940 --> 00:08:12,580 It's all put in unclick equals zero function like so, and that would solve the context issue. 114 00:08:14,060 --> 00:08:18,080 Then finally down at our button, it would be this dot on click. 115 00:08:18,990 --> 00:08:23,130 And that should be it now I'll leave it up to you to test this, because all I really want to show you 116 00:08:23,130 --> 00:08:24,780 was the typescript aspects. 117 00:08:25,240 --> 00:08:30,210 The big takeaways here is that to associate some props with a component, we could define the same kind 118 00:08:30,210 --> 00:08:32,150 of interface we did with our function component. 119 00:08:32,640 --> 00:08:37,230 And then whenever we define our class based component, we'll put in the component based class angle 120 00:08:37,230 --> 00:08:39,510 brackets and our props interface right there. 121 00:08:40,400 --> 00:08:46,040 And then four states, we can either rely upon type inference from typescript or alternatively, if 122 00:08:46,040 --> 00:08:49,940 we need to be more precise on the type we would put in our state. 123 00:08:51,930 --> 00:08:56,580 Our definition for the state interface and then the actual initialization object for it. 124 00:08:57,490 --> 00:08:58,690 All right, so that's pretty much it. 125 00:08:59,590 --> 00:09:02,260 Well, let's take a pause right here and move on in the next video.