How to use TypeScript errors to guide your callbacks - a podcast by Kent C. Dodds

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 ofan 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 thanopening 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 ourinput 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 pulledup 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 knowthat 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 willtake 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 F1eventually we're going to.
Find that this is typed as an event handler that accepts a change eventinput type or type as it's input ultimately this ends up just extending
this synthetic event and it has one additional property a targetinterestingly 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 achange 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 todo 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.

Further episodes of 3 Minutes with Kent

Further podcasts by Kent C. Dodds

Website of Kent C. Dodds