i18next: Typescript slow to show translation keys in intellisense

Discussed in https://github.com/i18next/i18next/discussions/1955

<div type='discussions-op-text'>

^{Originally posted by Bramgus12 May 5, 2023} Hi, I have some trouble with using typescript with i18n and react.

When I try to use the t function in my code and specifically as a child in tsx, typescript is slow with loading the types that I can use in that function. Can sometimes take up to 5 mins to load. While it is loading typescript itself is so busy getting the types that it won’t do anything else. This is really annoying if you have to keep restarting your ts server to make everything work again. My colleagues also tried to do the same thing as I did and had almost no issues (max 3 seconds to load the types). Only difference is that I have a MacBook pro m1-pro while my colleagues are using windows/linux. The translation files that I have a really small (max 30 translations per file). Anyone know what I am doing wrong?

Here is my setup:

i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import componentsENGB from "./languages/en_GB/components.json";
import generalENGB from "./languages/en_GB/general.json";
import componentsNLNL from "./languages/nl_NL/components.json";
import generalNLNL from "./languages/nl_NL/general.json";
import layoutsNLNL from "./languages/nl_NL/layouts.json";
import layoutsENGB from "./languages/en_GB/layouts.json";
import decisionToolNLNL from "./languages/nl_NL/decisionTool.json";
import decisionToolENGB from "./languages/en_GB/decisionTool.json";

export const defaultNS = "general";
export const resources = {
    en_GB: {
        components: componentsENGB,
        general: generalENGB,
        layouts: layoutsENGB,
        decisionTool: decisionToolENGB,
    },
    nl_NL: {
        components: componentsNLNL,
        decisionTool: decisionToolNLNL,
        general: generalNLNL,
        layouts: layoutsNLNL,
    },
} as const;

export const i18nInit = i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: "en_GB",
        // TODO: debug should only be true on development
        debug: true,
        interpolation: {
            escapeValue: false,
        },
        ns: ["components", "general", "layouts", "decisionTool"],
        defaultNS,
        resources,
    });

export default i18n;

i18next.d.ts

import { defaultNS, resources } from "./i18n";

declare module "i18next" {
    interface CustomTypeOptions {
        defaultNS: typeof defaultNS,
        resources: typeof resources["en_GB"],
    }
}

What it looks like when it is loading

</div>