What is the best way to define recursive Routes type using absolute paths?

Question

What is the best way to define recursive Routes type using absolute paths?

I am using react-router v6 in my application, and I need all paths in the router config object to be absolute

It is crucial for the path of a child route at any depth to start with its parent path to avoid potential crashes

It appears that a recursive type with template literals may be necessary

The type I have devised (with only path and children for simplicity) is as follows:

type Route<T extends string> = {
  path: T;
  children?: Route<`${T}/${string}`>[];
};

However, this approach does not work for nested routes, where the generic T reverts to a string type

const invalidRoute: Route<"/home"> = {
  path: "/home",
  children: [
    {
      path: "/home/about",
      children: [
        {
          // Expected type `/home/${string}/${string}` here, got `/home/about/${string}`
          // This lack of TypeScript error makes it challenging
          path: "/home/nonabout/whatever", 
        },
      ],
    },
  ],
}

Any assistance would be greatly appreciated!

typescript typescript-generics

Answer 1

Answer №1

Regrettably, accomplishing this task in typescript is not feasible. The Route type itself allows for any child element, so when the type is called recursively, T transforms into /home/${string}. Due to its importance at instantiation, it is advisable to incorporate a function that verifies your Route and raises an error if it does not meet the criteria.

type Route = {
  path: string;
  children?: Route[];
};

const route: Route = {
  path: "/home",
  children: [
    {
      path: "/home/about",
      children: [
        {
          path: "/home/about/whatever1",
        },
        {
          path: "/home/about/whatever2",
        },
      ],
    },
    {
      path: "/home/something",
      children: [
        {
          path: "/home/notSomething/whatever1",
        },
        {
          path: "/home/something/whatever2",
        },
      ],
    },
  ],
} as const;

/**
 * Validates the react router route object contains paths which are absolute
 * @throws TypeError when child path is not prefixed with parent path
 */
function ensureAbsoluteRoutes(route: Route): void {
  const parentPath = route.path;
  if (route.children) {
    for (const child of route.children) {
      if (!child.path.startsWith(parentPath)) {
        throw new TypeError(
          `Invalid path (${child.path}) is not prefixed with parent path (${parentPath})`
        );
      }
      enforceAbsoluteRoutes(child);
    }
  }
}

ensureAbsoluteRoutes(route);

I encountered a similar issue where I needed to convert an object into dot notation strings. To solve this, I had to define a depth, starting from the deepest child and moving upwards through the tree to generate the desired string. However, this approach only works efficiently if all paths have the same depth of children. This method is extremely intricate and may not be suitable for your specific scenario.

Typescript Playground

Answer 2

Regrettably, accomplishing this task in typescript is not feasible. The Route type itself allows for any child element, so when the type is called recursively, T transforms into /home/${string}. Due to its importance at instantiation, it is advisable to incorporate a function that verifies your Route and raises an error if it does not meet the criteria.

type Route = {
  path: string;
  children?: Route[];
};

const route: Route = {
  path: "/home",
  children: [
    {
      path: "/home/about",
      children: [
        {
          path: "/home/about/whatever1",
        },
        {
          path: "/home/about/whatever2",
        },
      ],
    },
    {
      path: "/home/something",
      children: [
        {
          path: "/home/notSomething/whatever1",
        },
        {
          path: "/home/something/whatever2",
        },
      ],
    },
  ],
} as const;

/**
 * Validates the react router route object contains paths which are absolute
 * @throws TypeError when child path is not prefixed with parent path
 */
function ensureAbsoluteRoutes(route: Route): void {
  const parentPath = route.path;
  if (route.children) {
    for (const child of route.children) {
      if (!child.path.startsWith(parentPath)) {
        throw new TypeError(
          `Invalid path (${child.path}) is not prefixed with parent path (${parentPath})`
        );
      }
      enforceAbsoluteRoutes(child);
    }
  }
}

ensureAbsoluteRoutes(route);

I encountered a similar issue where I needed to convert an object into dot notation strings. To solve this, I had to define a depth, starting from the deepest child and moving upwards through the tree to generate the desired string. However, this approach only works efficiently if all paths have the same depth of children. This method is extremely intricate and may not be suitable for your specific scenario.

Typescript Playground

What is the best way to define recursive Routes type using absolute paths?

Answer №1

Similar questions

Automatically create index.d.ts type definitions from a TypeScript module with just a few clicks

Utilizing formData.append in TypeScript to handle arrays

Exploring TypeScript with personalized iterators

Disabling a Drop-down Form Element in Reactive Forms with Angular 4 and above

Changing the value within a nested object dynamically in Angular 6 during execution

Angular checkbox filtering for tables

Using getters in a template can activate the Angular change detection cycle

Transform your TypeScript code with a jscodeshift codemod that removes generic type declarations while preserving the wrapped

The type 'angular' does not have a property of this kind

Display data in a nested array format using *ngFor in a table population

What is the best way to selectively retrieve a combination of keys from multiple objects within an array?

Make sure to verify the optional parameter before using it in your code

The Typescript object property is deemed as 'undefined' even though it has not been defined

Typescript failing to verify the data within an object being extended to fulfill a type

Exploring TypeScript: Strategies for typing multi-dimensional arrays with varying shapes

What is the solution to resolving the websocket.onclose issue in Thirdweb?

Could you explain the distinction between npm install and sudo npm install?

Steps for generating a fresh type denotation from a value within an object

Merge the variables extracted from an array of objects

Is it possible to modify the output type of a function depending on a parameter's characteristic?