How to use TypeScript errors to guide your callbacks

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.