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>.