How to use TypeScript errors to guide your callbacks

04/19/2021 , 2m, 53s

Your friends it's a beautiful day it's Monday and I wanted to share just something that I discovered while I was working on something just kind of an interesting workflow that I've come to start to use and that is if you are trying to use something and you don't know what type it requires rather than and assuming that it's written in touch script or at least has type definitions so like say you're passing a function to an API and some sort of callback, for example, maybe you're on an input in a j in your JSX and you have an on change in your not sure what type.

The event should be or that first argument or you don't even know whether it accepts arguments or anything so the way that I do this is rather than opening up the docks and digging around and trying to find how this is to find out what I'm expected to do here you put in a function that you're pretty confident is going to break the types in some way and so for our input on change example, you can just put an inline function in there that takes a single argument that you type as null or something and then you're going to get an error and the error is going to give you.

That the last line on the error is going to say that type such and such is not assignable to type null so in our example. I literally have this pulled up that's where this example came from but in our example it's type change event. HTML input event is not assignable to type null, so now you know that it's a type change event and if you're not sure where that change event is coming from then you can F12 into the unchange prop and it will take you right to where that is and here I see it's a type change event handler is what that type is and if we F12 into that we just keep on F1 eventually we're going to.

Find that this is typed as an event handler that accepts a change event input type or type as it's input ultimately this ends up just extending this synthetic event and it has one additional property a target interestingly that's an event target of the the given element so what was interesting about that actually is that that means that the target for a change event is equal to the input or to the current target.

I'm guessing so that's interesting anyway, so yeah, that's just kind of a general tip if you.You're working with something you're not sure what at least for our function you're passing this function you're not sure what arguments it should take pass it something that's just bogus that you you don't know if it's right or you're pretty confident it's wrong and the error message should give you an idea of what you are actually supposed to do there and you can do the same with the return value as well so like return a symbol or something that you're confident will not be what you're supposed to return and you'll get an error message indicating to you or giving you an idea of what you should return hope that's useful and interesting have a wonderful day.