Type inference for Remix loaders

page.tsx

import { DataFunctionArgs } from "@remix-run/node";

export async function loader({ request }: DataFunctionArgs) {
    const user = getUser(request);

    return typedJson({
        email: user.email,
    });
}

export default function Page() {
    const user = useTypedLoaderData<typeof loader>();

    return <div>Email: {user.email}</div>;
}

typed-loader.ts

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

// https://github.com/remix-run/remix/pull/1254#issuecomment-1126870942

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

type Scalar = string | number | boolean | null | undefined;
export type JSON = Scalar | { [key: string]: JSON } | JSON[];

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

New version! https://gist.github.com/esamattis/d1172371b0efc1327b8617de6e044f64