Typing Async Data

[00:00:00]
>> Steve Kinney: OK, no one's called me on this, but I've known it the entire time. There is one way that we have just been somewhat naive. I have sold you a story where, hey, if the default value of this useState is a number, then it knows that like you can only set it to a number, right? The problem with that entire, like that works, it's not a problem. The reality of that situation is it works when you have the value upfront and immediately, right?

[00:00:38]
The, as we've all figured out for even if you, whether you have been doing frontend engineering for a decade, or you have been doing it for a week, it has probably become clear that the hardest part, one of the hardest parts of what we do for a living is deal with the fact that everything is asynchronous, right? Which means you might not have that value when you call the useState. Also, you are probably fetching stuff from outside your codebase, right?

[00:01:13]
These are two of the, I think, the trickiest parts of everything that we do. And in this case, they really throw some monkey wrenches in some interesting ways. That said, the mixture of modern TypeScript and modern React give us some really, really elegant ways to handle this. So despite the fact that the problem is a somewhat insidious part of what we do for a living, the solution is going to be very simple.

[00:01:47]
So the problem is always, like, for instance, for article and set article, like I could say that it is this like post type, and I have, like I've made some types for this JSON placeholder API which is stuff like a fake API that you can use. So I could say that this, you know, you say for an article is this post type. But then like, I don't have the post type yet, because that's an asynchronous value that I have to fetch.

[00:02:25]
Right, and so what I end up having to do is to say that this can either be a post or null. Right. And I can then like start out as null, but then like, obviously, like, I have to assume at a given point that it's null, and yes, modern JavaScript TypeScript with like having this conditional thing going through can be not necessarily as bad as having a bunch of conditional checks. But like, the problem exacerbates itself in a large codebase, right, because let's say this post gets passed down to a child, grandchild, great grandchild component, and you're like, won't the context API save me for this?

[00:03:11]
No, in fact, we'll get to that in a second. It adds a different set of problems, right? And so it means at any given time as we pass this down, it could either be a post or null. Now I've got to deal with that fact for the rest of my life, or so I believe, right? There's a, the, there's this blog post from like 15 years ago by Isaac Schlueter, who is the creator and former CEO of npm and it was like, it's something I warn about unleashing Zalgo, and Zalgo is the moment you have any piece of asynchronous code in your codebase, everything is now asynchronous, you know what I mean?

[00:03:48]
Like, and that is, that is true in this case, where I can say that this can either be a post or null. And the nice part is, I can try, this will never work as well as you want it to, but I can do if article. Like if there's no article, really null, in this case. Return null and now, theoretically this component will like, cause you can return null from a JSX component and it just won't render anything.

[00:04:20]
So now, we theoretically will render nothing, which means if we got here from the same logic or we did the discriminated union before, I can now be somewhat confident that title is a string. Right? And here, we fetch the article with the ID and you can see that it's hitting that endpoint, and we response JSON, and everything's great, right? Right? Everything looks great. There's no red squiggly lines.

[00:04:53]
The only, like, brown squiggly line I had was because I was like, allowing an ESLint rule that wasn't actually like, or disallowing one that wasn't doing anything anymore. And so everything seems good. We've handled the async thing. I just gotta say what it will be and let it be null. Oh, but we haven't. Right? Does anyone know where the problem is? The problem is if we look at fetch article, what does it return?

[00:05:27]
Returns a promise of any, and like once any infects your code somewhere, it, like, everything looks fine, but like, and like TypeScript is like, yeah, it's a string, but you don't know that. Right, like we've insisted that it is here, but any is just insidious, right, and thereby needs to be like pushed out at all costs, right? And so even this data, we go over here, that's any and set article that only takes, takes a post or null, any slides right in there.

[00:06:00]
Right, you'd be like, this is the most terrible thing ever. That's partially because like TypeScript also has to like work with JavaScript and like be migratable and a bunch of stuff like that. So, then the next of like the, and I should have found a picture of this meme so I could stop talking about it and show it like Drake and Josh, we need the like galaxy brain list of memes, right? Right, so I could say, because fetch out of the box, not your fault, like fetch, fetch and response JSON.

[00:06:39]
That is actually typed in the like types that come with all the DOM browser objects as any, because like, it doesn't know what it's going to be, right? And so the kind of like next step, the next tier is, well, I'm going to say that this returns a promise of a post. Right? And like we feel good about that, right? And so now, we can say, we do fetch article, it's returning to promise as a post, data is a post, set article is a post, no more any.