Self referencing type with maximum depth

[nandorojo]

🍩 Feature Request

Is your feature request related to a problem?

I'm creating a navigation sidebar. It has dropdowns, with nested dropdowns inside of those (optionally).

Imagine this type of thing:

• Settings
  • Account
    • Notifications
    • Security
      • Password

Is there a way I can self-reference a MenuItem that has dropdownItems?: MenuItem with a maximum depth?

Describe the solution you'd like

Pseudocode (of how I imagine code should work):

type MenuItem<Depth extends number> = {
  name: string
  dropdownItems?: Depth > 0 ? MenuItem<Depth - 1>[] : never
}

Describe alternatives you've considered

import { Number } from 'ts-toolbelt'

type MenuItem<Depth extends number> = {
    name: string
    dropdownItems: Number.Greater<Depth, 0> extends true ? MenuItem<Number.Sub<Depth, 1>>[] : never
}

const menuItem: MenuItem<1> = {
    name: 'Products',
    dropdownItems: [{
        name: 'Edit',
    }]
}

However, this does not work. It looks like dropdownItems sets to never, and my menuItem variable fails.

Here's a playground link: https://www.typescriptlang.org/play?ssl=1&ssc=1&pln=13&pc=2#code/JYWwDg9gTgLgBAbzgOQK4gEYFMpwL5wBmUEIcA5DAM4C0MEEANtozOQFDswCeYWcAWSwA7VAEkYWEAB4AIljAwAFnCwAPScIAmVOKMw4AfHAC8idnEt6AhiCwAuOFRhRgwgOYWrWkmC0QAd2EJKSpHNAMoADoAcSgsa0koOQVlABo4AAZjdU0dOBdUfgB+QRFxSRkI7GiAZVQMFMUlDIBGQ0MAbQBdOEdhLAA3HHY8TgBjCGFnODtREJBHIXnK6XbTcysbO0dyAAUSLVRx6nI0r0sfCD9A4MqwuE6EC63thwoAUS1gNnOtvG6oyAA

Teachability, Documentation, Adoption, Migration Strategy

One thing that trips me up a bit: the docs use strings as the generics for Number.GreaterThan, but this doesn't seem to be in the types. Not sure if that's relevant: https://millsp.github.io/ts-toolbelt/modules/number_greatereq.html

Thanks again for your help!!

[nandorojo]

I'm not sure if this is allowed, but looks like ignoring depth made it work:

type Item = {
    name: string
    dropdownItems?: Item[]
}

const item: Item = {
    name: 'Settings',
    dropdownItems: [{
        name: 'Notifications'
    }]
}

@millsp should I be concerned about infinite circular references like this, or is this okay to do? If this works, I'll close this issue. Thank you!

[millsp]

Yes, that's definitely the way to go. You could enbale "noUncheckedIndexedAccess": true, for better type safety in your tsconfig.

[nandorojo]

Got it, thanks! Wish I'd known that sooner. Adding that field created 53 errors in my existing app, and refactoring would be too tough at the moment. I'll just rely on { dropdownItems: Omit<Item, 'dropdownItems'> [] } to allow a depth of one, for now.