Dynamic message keys

[henrikbossart]

Hi,

I have am trying to get the mesages dynamically like this:

// defined in messages.ts
export default {
  PageTitle: {
    new: {...},
    reports: {...},
    ...
  }
}


const titleTranslations = useTranslations('PageTitles')
const title =
    props.title ?? titleTranslations(`${pathname.split('/').at(-1) as typeof keys}.title`)

But am having a hard time doing it because TypeScript can't stop complaining about it. It works if I explicitly define the variable to be a certain key.

Is there some way I can type or cast this to work with dynamic keys?

Any help is highly appreciated! 🙏

[MaximeDetaille]

I actually got the same problem and i dont know how to fix that ...

[plfmoura-redraw]

Same problem here

[abdullah-cod9]

Try this

type Theme = "dark" | "light" | "system";
{t('general.theme.${theme as Theme}')}

en.json =
{ "theme": { "title": "Theme", "dark": "Dark", "light": "Light", "system": "System" }, }
it worked with me

[amannn]

select can also work well for these cases:

"theme": "{name, select, light {Light} dark {Dark} system {System} other {Unknown}}"

t('general.theme', {name: 'light'});

[henrikbossart]

That works. I was reluctant to use this approach, since I have a lot of keys that then need to be defined twice; both as a type and as the actual message key, but apparently it works to do:

import SomeMessage from '.....'

export type SomeMessageKeyType = keyof typeof SomeMessage