How to typecast mapped string array?

[angelod1as]

Description

I have a string array, and I map it like below:

{archetypes.map((archetype) => {
  const name = `${archetype}.name`
  const description = `${archetype}.description`
  return (
    <div key={archetype}>
      <h3>{t(name)}</h3>
      <p>{t(description)}</p>
    </div>
  )
})}

But this gives me the Typescript error:

Argument of type 'string' is not assignable to parameter of type 'MessageKeys<{ ...my translations }>.

(see that I omitted my translations above. The content of the object is the typing of my translation file.

Is there a way to typecast that the name and description constants are acceptable in that function? AFAIK there are no types exported, so there's nothing to typecast with.

Reproduction

(The provided sandbox does not work with Typescript)

Expected behaviour

I should be able to import a type that would fit the function

[amannn]

Hi! Your archetype is likely of type string, you need to type it to concrete string values for this to work.

I'll convert this to a discussion as this is not a bug but a usage question.

[angelod1as]

Thanks for moving to discussion.

In this case, the archetype will come from the translation json. There's no way, currently, for me to know exactly how many archetypes there will be — that's why this is mapped so that any number can be displayed at the end.

Concrete string values, then, are not possible because translators mostly won't mess with code.

[amannn]

I see. If the conrete values can't be known ahead of time, then you'll have to ignore the error (cast to any or @ts-expect-error).

An alternative, if you want to provide more flexibility to translators, is to use rich text:

"archetypes": `
  <item><name>Name 1</name><description>Description 1</description></item>
  <item><name>Name 2</name><description>Description 2</description></item>
  ...
`

t('archetypes', {
  item: (chunks) => <div>{chunks}</div>,
  name: (chunks) => <h3>{chunks}</h3>,
  description: (chunks) => <p>{chunks}</p>
});