Determine the route parameter name based on the path string, for example, '/posts/:id'

Question

Determine the route parameter name based on the path string, for example, '/posts/:id'

My Route interface has a params object, and I'm looking to ensure type safety on that params object. For example:

If we have a route config like this:

{
  post: {
    path: 'posts/:id',
  }
}

navigate({ name: 'post', params: { wrongKey: '1' } });

I've defined the Route interface as shown below, but T[keyof T] doesn't seem to correctly infer which key it is:

type Route<T extends Config> = {
  hash?: string;
  name: keyof T & string;
  params?: RouteParams<T[keyof T]['path']>;
  search?: Record<string, string>;
};

I want this scenario to raise an error because wrongKey should be id. Currently, all I get are param keys as types of string.

You can check out the full code in the playground link here.

typescript

Answer 1

Answer №1

Firstly, it is important to include as const in order for your paths to be treated as literals rather than just strings:

const routes = {
  post: { path: '/posts/:id' },
  blah: { path: '/posts/:blah' },
} as const;

Secondly, ensure that the navigate function has a second generic parameter to avoid inferring parameters as a union of all possibilities:

type Route<T extends Config, K extends keyof T = keyof T> = {
  hash?: string;
  name: K;
  params?: RouteParams<T[K]['path']>;
  search?: Record<string, string>;
};

const routes = {
  post: { path: '/posts/:id' },
  blah: { path: '/posts/:blah' },
} as const;

navigate(routes, { name: 'post', params: { id: '1' } }); //  ok
navigate(routes, { name: 'post', params: {} }); //           errors: missing id
navigate(routes, { name: 'postj', params: { id: '1' } }); // errors: no postj
navigate(routes, { name: 'post', params: { idj: '1' } }); // errors: no idj

function navigate<T extends Config, K extends keyof T>(config: T, route: Route<T, K>) { }

https://tsplay.dev/NB8nbW

Answer 2

Firstly, it is important to include as const in order for your paths to be treated as literals rather than just strings:

const routes = {
  post: { path: '/posts/:id' },
  blah: { path: '/posts/:blah' },
} as const;

Secondly, ensure that the navigate function has a second generic parameter to avoid inferring parameters as a union of all possibilities:

type Route<T extends Config, K extends keyof T = keyof T> = {
  hash?: string;
  name: K;
  params?: RouteParams<T[K]['path']>;
  search?: Record<string, string>;
};

const routes = {
  post: { path: '/posts/:id' },
  blah: { path: '/posts/:blah' },
} as const;

navigate(routes, { name: 'post', params: { id: '1' } }); //  ok
navigate(routes, { name: 'post', params: {} }); //           errors: missing id
navigate(routes, { name: 'postj', params: { id: '1' } }); // errors: no postj
navigate(routes, { name: 'post', params: { idj: '1' } }); // errors: no idj

function navigate<T extends Config, K extends keyof T>(config: T, route: Route<T, K>) { }

https://tsplay.dev/NB8nbW

Answer 3

Answer №2

Check out the HOTScript library for a similar example. Just before the API section, there is a code snippet that you can customize to suit your needs.

You might also want to experiment with adding as const after defining the routes object, like shown below:

const routes = {
  post: { path: '/posts/:id' },
} as const;

By doing this, the path property will be treated as a literal type instead of just a generic string type.

Answer 4

Check out the HOTScript library for a similar example. Just before the API section, there is a code snippet that you can customize to suit your needs.

You might also want to experiment with adding as const after defining the routes object, like shown below:

const routes = {
  post: { path: '/posts/:id' },
} as const;

By doing this, the path property will be treated as a literal type instead of just a generic string type.

Determine the route parameter name based on the path string, for example, '/posts/:id'

Answer №1

Answer №2

Similar questions

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

What is the best way to export a default object containing imported types in TypeScript?

Angular Obsidian Theme

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Trouble displaying object in template using Angular's ngrx

Unable to access structuredClone on the global object within a Node.js application

The object's value may be 'undefined' after utilizing a switch case to ensure it is not undefined

Can Angular 9 be used to compile a latex document?

How can I implement dynamic styling for the rows in the PrimeNG table?

How should a child component specify the type of component being passed in props?

"Utilizing ReactJS and Typescript: A guide on initiating a Redux dispatch event through an axios

What is the best way to detect object changes in typescript?

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

Customized interfaces utilizing generic components

What is TypeScript's approach to managing `data-*` attributes within JSX?

The unique Angular type cannot be assigned to the NgIterable type

Transforming an object into an interface in TypeScript

The search for d.ts declaration files in the project by 'typeRoots' fails

An unexpected stats.js error occurred while attempting to apply custom styles to the map in AngularGoogleMaps,

Service consuming in Angular 2 using Stomp protocol