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 😎
}

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