1 00:00:00,360 --> 00:00:03,570 In this video, we're going to try to figure out why we are getting an error message from this line 2 00:00:03,570 --> 00:00:08,400 up here, but not if we define the same function directly in line on the on change prop. 3 00:00:08,970 --> 00:00:13,860 The reason we're seeing this error message is all because of that type inference system in typescript 4 00:00:13,860 --> 00:00:14,700 and how it works. 5 00:00:15,000 --> 00:00:19,170 Remember, TypeScript is always trying to figure out the different types of values blowing around your 6 00:00:19,170 --> 00:00:19,760 application. 7 00:00:20,130 --> 00:00:23,160 One tool it has to do that is the type inference system. 8 00:00:23,700 --> 00:00:28,680 If we take a look at the this input element right here and then mouseover on change, you'll notice 9 00:00:28,680 --> 00:00:32,790 that TypeScript is 100 percent aware of what that on change probably is. 10 00:00:33,030 --> 00:00:34,830 It understands that it is a prop. 11 00:00:35,100 --> 00:00:38,670 It understands that we are required to provide some kind of callback function to it. 12 00:00:39,150 --> 00:00:43,920 This right here says that if we decide to provide in all that function to on change, it's going to 13 00:00:43,920 --> 00:00:48,840 have a first argument that we might call event and its type will be that right there. 14 00:00:49,380 --> 00:00:51,510 So a type for that event object. 15 00:00:51,990 --> 00:00:56,030 If you mouseover E right here in line, you'll notice we get the exact same type. 16 00:00:56,550 --> 00:01:01,490 So that is the type inference system in typescript being applied to this on change callback. 17 00:01:02,250 --> 00:01:07,500 However, the type inference system is not applied if we defined the function ahead of time. 18 00:01:08,100 --> 00:01:14,220 So even if we define the function ahead of time, even if we pass down on change like so, the inference 19 00:01:14,220 --> 00:01:15,210 will not be applied. 20 00:01:15,540 --> 00:01:21,180 Type inference is only applied inside of our JSA when we define that callback function directly in line. 21 00:01:22,590 --> 00:01:24,030 So how are we going to solve this? 22 00:01:24,330 --> 00:01:31,020 How are we going to define and change ahead of time and still somehow annotate the type of event object 23 00:01:31,020 --> 00:01:31,380 right here? 24 00:01:32,100 --> 00:01:33,840 Well, it's going to be pretty straightforward. 25 00:01:34,230 --> 00:01:35,640 We're still going to have an event object. 26 00:01:35,670 --> 00:01:40,410 I'm going to very quickly rename it just to make our code a little bit more clear, because E is not 27 00:01:40,410 --> 00:01:41,040 very clear. 28 00:01:41,970 --> 00:01:47,220 Then to apply a Type two event right here, let me show you a little trick, I'm going to mouseover 29 00:01:47,220 --> 00:01:54,900 on change and then going to find the react change event right here, highlight it, copy it, put a 30 00:01:54,900 --> 00:01:57,390 call in after event and then paste that type in. 31 00:01:58,050 --> 00:02:03,030 So this is essentially the exact same thing as type inference where we're kind of taking that inferred 32 00:02:03,030 --> 00:02:05,190 type or the required type of change. 33 00:02:05,340 --> 00:02:07,590 We are just manually placing that type right there. 34 00:02:08,160 --> 00:02:12,900 Now, our event object is properly typed and we can refer to all different kinds of properties on it, 35 00:02:13,020 --> 00:02:17,460 such as event target value or whatever else we want to access. 36 00:02:18,510 --> 00:02:23,400 And you will notice that if we look at this event type right here, it says change event, but there 37 00:02:23,430 --> 00:02:29,190 are other kinds of events that we handle inside of Recode, such as maybe a hover or a drag or other 38 00:02:29,190 --> 00:02:31,700 stuff like that that we might want to annotate as well. 39 00:02:32,070 --> 00:02:33,360 So let's take a quick pause. 40 00:02:33,360 --> 00:02:34,260 Come back in just a moment. 41 00:02:34,260 --> 00:02:38,790 And I want to show you a couple of other types of events that you might want to be aware of.