Remix V2 - How to type useLoaderData correctly

Question

Most example I found about how to correctly type useLoaderData do it like this

export const loader = async () => {
   return json({ messages: [...] })

}

// In component...
const { messages } = useLoaderData<typeof loader>

However, since V2, useLoaderData is typed like this

export declare function useLoaderData(): unknown;

and we can't pass generics anymore. What's surprising is I can't find a single page mentioning this critical change. What is the best way to get type safety then ? How can I tell TypeScript that messages actually exits in the response, without having to hardcode the type itself and use an ugly cast with as ?

Thank you!

Answer 1

I just found the answer ! My IDE imported useLoaderData from react-router instead of @remix-run/react by default. It doesn't even suggest me the right package, that's why I did not realize it. I went through the changelog again and I noticed the difference !

Answer 2

The Remix will pick up the type of loader, if you are returning message, you can run the type check it will throw the error. If you are using VS Code then try importing something other than message, it will throw a little warning, that the given key doesn't exist on the type loader.

Else,You can create an interface

interface Message {
   message: YOUR_DESIRED_TYPE
}

import it and use it in your component.

const { message } = useLoaderData<Message>

It's still clean and you can maintain all the route's loader type in a single file.