0:00 Let's hack a solution together. Then I'll show you some of the more beautiful solutions. The thing that we need to do is we need to remove onChange from this prop here. If you think about it, this is an object. We need to just take away, omit a key from that object. We know which one it is. It's the onChange one.

0:18 Imagine we do this. We say, let's say, type example equals component props input. Let's say we have const example is an example here. We basically definitely need to pass onChange here. OnChange is going to be a function that returns this. It's a type of React <InputHTMLElements>, blah, blah. This huge thing React.ChangeEventHandler.

0:41 The way that we get rid of that key and we make this a type error is we use omit. We can wrap this in omit and pass it the key that we want to omit here. This is onChange. Now, onChange does not exist in our example type. We can't pass it. We can't even get autocomplete on it. There we go. That is the thing that we need to use here.

1:05 Let's now, to make this work, we need to wrap this in omit with onChange. Let's do that. Omit component props input onChange. Now because we're overriding it here, providing a new value to it, then everything works. This E is a string as we expect. If we remove this then we won't even be able to pass onChange because onChange isn't available in this omit component props.

1:28 Let's add that back in. Let me show you a prettier solution. The ugly thing about this is when we hover over our input here, then we're going to get this big disgusting huge type declaration inside our hover here, which isn't really ideal. It would be nice if it just said input props or something. The first way that you can do that is you can just extract it out into a type here.

1:51 We have input props equals exactly the same thing as we declared before. Now when you hover over the input, you get props input props. Beautiful, lovely, lovely. Of course, we can export this and reuse it elsewhere. Very nice. We can also do this via an interface if we want to. We can say interface input props extends omit component props input onChange. Then add this onto here. Just a different style basically, but it achieves the same purpose.

2:17 The final way you can do it is actually by creating a reusable type helper called Override Props. Override Props, what it does is it takes in two type arguments -- this is using generics here -- where we have a T and a T overridden. This T, we can omit T, key of T overridden, and then pass in and T overridden.

2:40 We end up with Override Props, Component Props Input, and then we just pass in the stuff that we want to add here. If we added something else in here...I don't know. What's another one that we could add into Input Props? Let's say name, and we just said name, number, for instance. Now, Props.Name is going to be of a type number, not a type string. Pretty useful.

3:02 This gives us a sense of the different possibilities when we have a situation where we want most of the HTML props but really we want to override only one of them.