Nested recursive Type Hinting in TypeScript?

Question

I'm not entirely sure if I'm calling this right so I'll explain.

I'm creating React app using TypeScript, in order to make my life simpler I want to store all routings paths as constants separately, I also want to have TypeScript like auto-completion in VS Code. So I have this king of structure:

type GlobalRoutingT = 'user' | 'listing';

type RoutingVariants = {
  list: string,
  add: string,
  get: string,
  [key: string]: RoutingVariants | string,
};

type RouterT = Record<GlobalRoutingT, RoutingVariants>;

export const Routes: RouterT = {
  user: {
    list: '/user',
    add: '/user/add',
    get: '/user/:id',
    invoices: {
      list: '/user/invoices',
      add: '/user/invoices/add',
      get: '/user/invoices/:id',
    }
  },
  listing: {
    list: '/listing',
    add: '/listing/add',
    get: '/listing/:id',
  },
};

It works all great I can use it like this at the moment

<Route path={Routes.user.invoices.get} exact >
  <GetInvoice />
</Route>

But inside VS Code I get error:

Property 'get' does not exist on type 'string | RoutingVariants'. Property 'get' does not exist on type 'string'.

and Routes.user.invoices.get part is highlighted.

What am I doing wrong?

The problem is that `[key: string]: RoutingVariants | string` says that _any_ property of `RoutingVariants` can have `string` as type, so `Routes.user.invoices` can technically be a string. I'm not sure how to work around that, yet. — Cerbrus, Oct 18 '21 at 12:33
@Cerbrus Sounds about right, but it's frustrating and I dont understand if it's eslint problem or I'm just bad at TypeScript. — Alex Pokydko, Oct 18 '21 at 13:05
have you had a look at my answer? I think that's the closest to what you're describing. — Cerbrus, Oct 18 '21 at 14:57

score 2 · Accepted Answer · answered Oct 18 '21 at 13:09

It looks like what you want isn't exactly possible: How to combine known interface properties with a custom index signature?

You can't combine an index signature with named keys on the same interface / type.

As a workaround, you could use a "child" property, like this:

type GlobalRoutingT = 'user' | 'listing';

type RoutingVariants = {
    list: string,
    add: string,
    get: string,
    child?: Record<string, RoutingVariants>
};

type RouterT = Record<GlobalRoutingT, RoutingVariants>;

export const Routes: RouterT = {
    user: {
        list: '/user',
        add: '/user/add',
        get: '/user/:id',
        child: {
            invoices: {
                list: '/user/invoices',
                add: '/user/invoices/add',
                get: '/user/invoices/:id'
            }
        }
    },
    listing: {
        list: '/listing',
        add: '/listing/add',
        get: '/listing/:id'
    }
};

const a = Routes.user.child?.invoices.get;

Notice how I have to use ?. to access the child, as it's optional on the type definition.

You could replace child with something shorter, a single letter, $ or _...

Sorry for delay, it looks like the most strait forward way of doing it. Thanks — Alex Pokydko, Oct 19 '21 at 07:37

score 0 · Answer 2 · answered Oct 18 '21 at 12:34

0

You need to force the type cast, try this:

<Route path={(Routes.user.invoices as RoutingVariants).get} exact >
  <GetInvoice />
</Route>

answered Oct 18 '21 at 12:34

Dardino

154
1
7

Works, but if nesting continues, this is gonna stack pretty quickly ;'( – Alex Pokydko Oct 18 '21 at 13:17

Nested recursive Type Hinting in TypeScript?

2 Answers2