Integrate TypeScript Into a Remix Loader Function
We can take advantage of TypeScript by setting our loader function to the LoaderFunction type from @remix-run/node
Then we can ensure that our loader is returning the type that we want by creating a custom type called LoaderData with a property of posts.
We’ll also do a cool trick where we get the awaited return type of our getPosts async function. This is done like this posts: Awaited<ReturnType<typeof getPosts>>
Kent C. Dodds: [0:00] TypeScript isn't super jazzed about what we're doing in here because it has no idea what this PostsRoute thing is coming from useLoaderData. That means that we don't get any sort of type checking in here or even autocomplete. That's a total shame. Let's make TypeScript happy here.
[0:16] The first thing that we're going to do is turn this into a LoaderFunction and that LoaderFunction comes from "@remix-run/node". That will help type our arguments as well as a return value so it's always nice to have that. Then, json is actually a generic. It's going to take the type for whatever we're sending along to our frontend.
[0:36] I'm going to make a special type for that called LoaderData. This is going to have a posts. Our posts is whatever is returned by getPosts. Watch carefully. This is fun. We're going to say typeof getPosts. That's going to get us the function. We want the return type of that function so we'll say a ReturnType. Then, that actually gives us a promise.
[1:01] That's not what we get when we await this. We actually want the posts that have the slug and the title and so we're going to say the Awaited version of what the ReturnType of the typeof getPosts is. That is going to give us our slug and our title.
[1:19] Now, if we say as LoaderData, our posts are exactly what we want them to be. We can say our json needs to return the LoaderData, giving us a fair amount of type safety. If we were to come over here, change from title to postTitle, and save that, now we're getting some type checking right here, which is quite handy, I must say.
[1:42] To make TypeScript a little bit happier here, we created this LoaderData. We sent our loader to be a LoaderFunction. We passed the LoaderData to the json generic. We typecast useLoaderData to be LoaderData. We generated the LoaderData based on the typeof getPosts.
[2:02] We got the ReturnType for that function. We awaited the ReturnType because what is returned by getPosts is a promise, thanks to the fact that it is an async function.
Feels odd to have to type cast useLoaderData as LoaderData when in v1 it was possible to do useLoaderData<typeof loader>()? Will this be changed again in the future to not have to cast types and infer them instead?
Where is the video for this lesson?