Utility function to get params to avoid as?

[kentcdodds]

Before:

import { LoaderFunction, useParams } from "remix";
import { RouteParams } from "routes-gen";

export const loader: LoaderFunction = async ({ params }) => {
  const { productId } = params as RouteParams["/products/:productId"];
};

After:

import { LoaderFunction, useParams } from "remix";
import { getParams } from "routes-gen";

export const loader: LoaderFunction = async ({ params }) => {
  const { productId } = getParams("/products/:productId", params);
};

Or something like that. Just so we can avoid the as casting :)

[sandulat]

That's a great idea!

[aniravi24]

What I do in my project is type the loader itself

import { LoaderArgs as RLoaderArgs } from "@remix-run/node";
import { RouteParams } from "routes-gen";

 type TypedParams<T extends keyof RouteParams> = {
    params: RouteParams[T];
  };

type LoaderArgs<T extends keyof RouteParams> = Omit<RLoaderArgs, "params"> &
    TypedParams<T>;

Then you can type the loader as follows

export const loader = async ({ request }: LoaderArgs<"/login">) => {};

Can do the same thing with actions as well

Of course, this doesn't do any runtime validation but it prevents you having to use as