assertParams()

[binajmen]

I was tired of writing invariant() when requiring params to be strings (in loader, actions, or the route component).

So I ended up with:

import { Params } from "@remix-run/react";

export function assertParams<Key extends string = string>(
  params: Params<Key> | Readonly<Params<string>>,
  ...keys: Key[]
): { readonly [key in Key]: string } {
  const result: any = {};
  for (const key of keys) {
    if (typeof params[key] !== "string") {
      throw new Error(`Expected string value for key "${key}"`);
    }
    result[key] = params[key];
  }
  return result;
}

To be used as:

import { useParams } from "@remix-run/react";

export async function loader({ request, params }: LoaderArgs) {
  const { lang } = assertParams(params, "lang");
  ...
}

export async function action({ request, params }: ActionArgs) {
  const { lang } = assertParams(params, "lang");
  ...
}

export default function RouteComponent() {
  const { lang } = assertParams(useParams(), "lang");
  ...
}

This will throw if not defined (but it should be when using at the right place) and will ensure type safety.
Quite handy with many params:

export async function loader({ request, params }: LoaderArgs) {
  const { this, route, has, many, parameters } = assertParams(params, "this", "route", "has", "many", "parameters");
  ...
}

[sergiodxa]

I was thinking about adding some utilities for body validation, but I think https://github.com/rileytomasek/zodix does a great job here

[binajmen]

I'll stick to my solution for this specific typing "problem", but I'll definitely give a shot at zodix, it looks great!