Allow params to be typed to integers, eg '/users/:userId<int>

[humphrey]

How does everybody handle params that need to be numbers (well integers)? Currently I am having to do use parseInt such as:

const User = (props: {id: number}) => <div>Hello user #{props.id}</div>;

const Router = createRouter({
  UserDetail: "/users/:userId",
});

const Example = () => {
  const route = Router.useRoute(['UserDetail']);
  return match(route)
      .with({ name: 'UserDetail' }, (p) => <User id={parseInt(p.params.userId)} />) /* userId is a string, but I need a number */
      .otherwise(() => <div>404 Not found</div>)';
}

However it's possible that userId is NaN, and therefore unexpectedly breaks when used.

As chicane already has array and union types, would it work to be able to also describe basic types such as integers or numbers?

Thanks!

[bloodyowl]

I'd use the when parameter of the ts-pattern .with method for this:

.with({ name: 'UserDetail' }, ({params: {userId}}) => !Number.isNaN(parseInt(userId)), (p) => <User id={parseInt(p.params.userId)} />) 

Having int adds challenges that I don't think the library should make decisions about:

• should it only support unsigned integers?
• what's the max supported value? should it only support 32bits ints or big integers as well?
• how does the library handle int overflows

[humphrey]

Oh awesome! That works great thanks!

Having int adds challenges that I don't think the library should make decisions about

Good point! One of the things I like about Chicane is how simple it is. Whereas, I feel like I need to set aside 30mins to re-read the react-router docs whenever I have to make changes to a react-router project.

[zoontek]

Note that you could create a custom, reusable P.when pattern to handle such cases:

const intPattern = P.when(
  (x) => typeof x === "string" && Number.isFinite(Number.parseInt(x)),
);

const Example = () => {
  const route = Router.useRoute(["UserDetail"]);

  return (
    match(route)
      .with({ name: "UserDetail", params: { userId: intPattern } }, (p) => (
        <User id={Number.parseInt(p.params.userId)} /> // it's safe to parse the userId here
      ))
      .otherwise(() => <div>404 Not found</div>)
  );
};

[humphrey]

Oh that's cool also! I'll keep this in mind once my number of routes increases. The ts-pattern library seems quite powerful.