react-i18next <Trans /> component values are not type safe

samuelpucat commented 1 month ago

🐛 Bug Report

When using react-i18next <Trans /> component, prop values provides no intellisense and throws no TS errors.

To Reproduce

I followed these tutorials:

I generated /src/@types/resources.d.ts with i18next-resources-for-ts interface -i ./public/locales/en -o ./src/@types/resources.d.ts script:

// resources.d.ts

interface Resources {
  "translation": {
    ...
    "title": "Title: <strong>{{appName}}</strong>",
    ...
  },
  ...
}
export default Resources;

I created /src/@types/i18next.d.ts:

// i18next.d.ts

import Resources from './resources'

declare module 'i18next' {
    interface CustomTypeOptions {
        defaultNS: 'translation';
        resources: Resources;
        allowObjectInHTMLChildren: true;
    }
}

I added /public/locales/en/translation.json

{
    "title": "Title: <strong>{{appName}}</strong>"
}

I used the translation like this:

<Trans
  t={t}
  i18nKey="title"
  values={{
    appName: 'Super duper app',
    // wrong value key but no TS error
    // apName: 'Super duper app',
  }}
/>

or this:

<Trans
  t={t}
  i18nKey="title"
>
  {/* wrong value key but no TS error */}
  Title <strong>{{apName: 'Super duper app'}}</strong>
</Trans>

i18nKey had good intellisense and threw TS error when I typed a different key but wrong values key didn't throw any error.

Expected behavior

I would expect same error as when using t function with wrong value keys:

{/* wrong value key with correct TS error */}
{t('title', { apName: appName })}

throws error:

Argument of type '["title", { apName: "Super duper app"; }]' is not assignable to parameter of type '[key: "title" | "title"[], options?: ({ readonly apName: "Super duper app"; } & { appName: unknown; }) | undefined] | [key: string | string[], options: { readonly apName: "Super duper app"; } & $Dictionary & { ...; }] | [key: ...]'.
  Type '["title", { apName: "Super duper app"; }]' is not assignable to type '[key: string | string[], defaultValue: string, options?: ({ readonly apName: "Super duper app"; } & $Dictionary) | undefined]'.
    Type at position 1 in source is not compatible with type at position 1 in target.
      Type '{ apName: "Super duper app"; }' is not assignable to type 'string'.