Unable to get type-safety (CustomTypeOptions) working with react-i18next

Question

I recently successfully implemented using react-18next for localization needs inside my app. I have a small package that contains the localization files, react-i18next setup, and exports a class which is referenced in another application to get the i18n instance and pass it to the which wraps my components.

This has been deployed and works as expected.

I stumbled upon the documentation here (https://react.i18next.com/latest/typescript#create-a-declaration-file), which says that you are able to make the t function fully type safe. I would love to implement this, so that I am able to catch mis-matched key errors at compilation time, rather than needing to hunt for each case within the application.

I am having some trouble achieving this desired type-safety though, and wasnt sure if it was something that I am doing wrong or possibly a bug in the typing (I assume the former, as others seem to get the safety working without any issue).

Versions:

• react-i18next “^11.15.6”
• i18next “^21.6.14”
• react “16.14.0”
• typescript 4.1+

Repo structure (excluding package.json, tsconfig.json, etc) :

• src
  • translations
    • translations_en.json
    • translations_es.json
  • MyTranslationManager.ts
  • react-i18next.d.ts

The translation files do not use any nested strings, and are separated by language (”_en” vs “_es”). Each language has all the needed strings in their localized format. The files are in this format:

{
  "string1": "First string",
  "string2": "Second string"
}

In my live (working) setup, this is how I initialize my instance:

import translationEN from "./translations/translations_en.json";

export class MyTranslationManager {
  private readonly i18nInstance: i18nType;
  constructor() {
        this.i18nInstance = i18n.createInstance();

        const defaultResources = {
            en: { translation: { ...translationEN } },
        };

        this.language = "en";

        this.i18nInstance
            .use(initReactI18next)
            .init({
                resources: defaultResources,
                lng: "en",
                keySeparator: false, // we do not use nested translation resources
                interpolation: {
                    escapeValue: false, // React already prevents XSS
                },
            });
}

// WORKING ON TYPE SAFETY

As directed in the docs, I create a react-i18next.d.s file to redeclare the “react-i18next” module - specifically the CustomTypeOptions interface:

import "react-i18next";
import translationEN from "./translations/translations_en.json";

declare module "react-i18next" {
    interface CustomTypeOptions {
        resources: typeof translationEN;
    }
}

I do not declare a “defaultNS” option to CustomTypeOptions because I rely on the default namespace, “translation”.

When I attempt to compile the project with the above code, I get the following TS2344 issue:

node_modules/react-i18next/ts4.1/index.d.ts:203:25 - error TS2344:
Type 'string' does not satisfy the constraint 'Namespace<"btn_cancel" | "btn_save" | ... 86 more ... | "msg_unsavedChanges">'.

203   N extends Namespace = DefaultNamespace,

The error is thrown from each line in react-i18next/ts4.1/index.d.ts that attempts to set Namespace = DefaultNamespace.

I copied over as much of the code in index.d.ts as I could into the Typescript playground to try and get some insight into what is happening here, and I am able to get the compilation error to repro.

Hovering over the following items in the Typescript playground gives some interesting insight:

• DefaultResources will resolve to { “btn_cancel”: string; “btn_ok”: string; }
• DefaultNamespace will resolve to “ type DefaultNamespace<T = "translation"> = T extends "btn_cancel" | "btn_ok" ? T : string “
  • I assume this gets set by the use of the Fallback type, which gets passed in each key from DefaultResources via the keyof...

Link to playground.

My question is, why are the keys for the language files being set as the namespace? Is this by design? Am I importing the resources in an incorrect manner?

I noticed that the example here (https://github.com/i18next/react-i18next/blob/master/example/react-typescript4.1/no-namespaces/%40types/react-i18next/index.d.ts) only shows what the docs point to as an older version, i.e using the DefaultResources type instead of CustomTypeOptions. Any guidance on using the new method without namespaces would be greatly appreciated :)

Answer 1

For anyone working with [email protected] and [email protected], following the documentation here was successful for me (as of the time this was posted):

https://www.i18next.com/overview/typescript

I am now getting types for my translations inside of the t() function