TypeScript inference for Remix.run loaders and actions

typed-loaders.ts

import { json } from "@remix-run/node";
import { useActionData, useLoaderData } from "@remix-run/react";

export function useTypedLoaderData<T extends (arg: any) => any>(): Awaited<
    ReturnType<T>
> {
    return useLoaderData();
}

export function useTypedActionData<T extends (arg: any) => any>():
    | Awaited<ReturnType<T>>
    | undefined {
    return useActionData();
}

export function typedJson<T>(data: T, init?: Parameters<typeof json>[1]): T {
    return json(data, init) as any; // LIE, but practical 😎
}

Related https://twitter.com/esamatti/status/1527393894824042497

`import type { TypedResponse } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

type InferJSONData = T extends TypedResponse ? R : T;

type Fn = (...args: any[]) => any;

type InferLoaderData = InferJSONData<Awaited<ReturnType>>;

export const useTypedLoaderData = () => {
return useLoaderData<InferLoaderData>();
};`

took a pretty similar approach here, but instead am unwrapping the response type from the json() function, so the typedJson function isn't necessary.

@jonbilous This is not actually needed anymore since it is build into Remix