definetly type "handle" in a Route component (typescript)

[frankybboy96]

I'm creating a breadcrumb using the useMatches hook, similar to the example in the documentation and I have 2 different kinds of crumbs that i'm using in my app. i'm looking for a way to change the typing of the "handle" props to extend my own crumb type on it.

type NamedCrumb = { name: string };
type DynamicCrumb = { parameterName: string };
type CrumbType = NamedCrumb | DynamicCrumb;

I'd want the handle props to specify the presence of an optional crumb parameter typed CrumbType

[Lesik]

I'm trying to do the same thing (make sure I don't have a typo in my handle, i.e. breadcurmb), and I got this far (as an example I used number, in reality it would be something like { breadcrumb: string }):

router.d.ts

import {
  PathRouteProps,
  IndexRouteProps,
  LayoutRouteProps,
  NonIndexRouteObject,
} from "react-router";

declare module "react-router/dist/lib/components" {
  export interface PathRouteProps {
    handle: number;
  }
  export interface LayoutRouteProps {
    handle: number;
  }
  export interface IndexRouteProps {
    handle: number;
  }
}

And that works, I can see number as one of the types that handle can be. Unfortunately, it looks like TypeScript declaration merging doesn't allow to overwrite with a conflicting type (see this Playground). Because the original type of handle is any, it results in any | undefined | number. Which isn't helpful because it's equivalent to any.

Does anybody know how to force-override a field using module augmentation?

[aximusnl]

I solved it like this:

// remix-run.d.ts

declare module '@remix-run/router' {
  import type {
    AgnosticIndexRouteObject as AgnosticIndexRouteObjectOriginal,
    AgnosticNonIndexRouteObject as AgnosticNonIndexRouteObjectOriginal,
  } from '@remix-run/router/dist';

  type Handle = {
   foo?: string;
  };

  export interface AgnosticIndexRouteObject extends AgnosticIndexRouteObjectOriginal {
    handle: Handle;
  }

  export interface AgnosticNonIndexRouteObject extends AgnosticNonIndexRouteObjectOriginal {
    handle: Handle;
  }

  export * from '@remix-run/router/dist';
}

[sk22]

I noticed that with the workaround by @aximusnl, other properties were suddenly typed as any, which is definitely not what I want. Turns out this is because AgnosticIndexRouteObject and AgnosticNonIndexRouteObject aren't defined in @remix-run/router/dist, but in @remix-run/router/dist/utils.

Changing the import path alone seems not to fix the issue though. I'm not quite sure what else has to be different, but this seems to work (I've moved the imports to the type definitions and changed the interfaces to be types, as defined in @remix-run/router/dist/utils. I've also moved the Handle type somewhere else, but this really doesn't matter):

import { Handle } from './types';

declare module '@remix-run/router' {
	export type AgnosticIndexRouteObject = Omit<
		import('@remix-run/router/dist/utils').AgnosticIndexRouteObject,
		'handle'
	> & { handle: Handle };

	export type AgnosticNonIndexRouteObject = Omit<
		import('@remix-run/router/dist/utils').AgnosticNonIndexRouteObject,
		'handle'
	> & { handle: Handle };
}

[kolben]

I think I found an easier way to do this (the above won't work with react router 7):

import type {
	IndexRouteObject,
	NonIndexRouteObject,
} from "react-router";

export type MyHandle  = {
      whatever: string;
}

export type MyIndexRouteObject = Omit<IndexRouteObject, "handle"> & {
	handle?: MyHandle;
};

export type MyNonIndexRouteObject = Omit<
	NonIndexRouteObject,
	"handle" | "children"
> & {
	handle?: MyHandle;
	children?: Array<MyNonIndexRouteObject | MyIndexRouteObject>;
};

Then just use MyNonIndexRouteObject when defining your route (base route is rarely an index route :).

I still don't understand why a generic handle type is not supported on RouteObject like RouteObject<MyHandle>.

[thiagodebastos]

I'm still working on a similar thing and it seems as though UIMatch is a generic:

UIMatch<Data = unknown, Handle = unknown>

Although not ideal, a starting point might be something like:

const getHandleTitle = (matches: UIMatch<unknown, { title: string }>[]) => {
	const title = matches[matches.length - 1].handle.title
}

[kolben]

Yep but that doesn't help when you are defining your routes.

handle: {
  header: "forgot that it's title",
}

My previous suggestion is to skip the data type for UiMatch and type handle on RouteObject instead

[lextas]

Since there doesn't seem to be a built-in way to extend the existing type I'm working around this by wrapping the useMatches and cast it myself. It's not ideal but seems cleaner than hacking the module declaration. If this problem gets fixed in a nice way I can just find/replace the useTypedMatches for the original.

note: I used react-router so if you want to use this you probably want to import from remix instead.

import { useMatches, type UIMatch } from "react-router";

type Handle = {
  title?: string;
}

const useTypedMatches = <TData extends unknown>() => useMatches() as UIMatch<TData, Handle>[];

// usage
const matches = useTypedMatches();

-or-

const matches = useTypedMatches<{
   dataProp?: string
}>();

This also allows you to type the TData in case you need that.