conscious-sapphire

extending linkOptions

Hi, is there any option to make this function typeSafe? I am talking about extending the "link" with "permisson" I've been strugling with a working solution for a while now and I usually just skip the typeSafety with linkOptions and just make it a const

const getRoleBasedLinks = (user: AuthUser) => {
  const allLinks = linkOptions([
    {
      to: "/app",
      icon: HomeIcon,
      title: "Domů",
    },
    // {... more links}
    {
      to: "/app/administrace",
      icon: LockIcon,
      title: "Administrace",
      permission: ["admin"],
    },
  ]);

  // Filter based on user's position
  return allLinks.filter((link) => {
    if (!link.permission) return true;
    return link.permission.some((position) =>
      user.player_role?.includes(position),
    );
  });
};

const getRoleBasedLinks = (user: AuthUser) => {
  const allLinks = linkOptions([
    {
      to: "/app",
      icon: HomeIcon,
      title: "Domů",
    },
    // {... more links}
    {
      to: "/app/administrace",
      icon: LockIcon,
      title: "Administrace",
      permission: ["admin"],
    },
  ]);

  // Filter based on user's position
  return allLinks.filter((link) => {
    if (!link.permission) return true;
    return link.permission.some((position) =>
      user.player_role?.includes(position),
    );
  });
};

4 Replies

eager-peach•3w ago

lacks context, so not clear what you mean by "make this function typeSafe"

eager-peach•3w ago

did you have a look at https://tanstack.com/router/latest/docs/framework/react/guide/type-utilities#type-checking-link-options-with-validatelinkoptions ?

Type Utilities | TanStack Router React Docs

Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the in...

conscious-sapphireOP•3w ago

I'm running into an issue where I want to add a permission property to my link objects so I can dynamically show or hide links based on the user's role. But whenever I try to access it, like link.permission, I get a TypeScript error saying that property doesn't exist on the link object.

eager-peach•3w ago

maybe just needs if ('permission' in link) so that typescript can properly narrow this?

Gaming

Programming

extending linkOptions

Did you find this page helpful?