reactjs - TypeScript härleder inte typerna för react-i18n "useTranslation"-hooken

Med react-i18n använder jag useTranslation-hooken från detta paket:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

t('blabla');

Men TypeScript upptäcker/infer typer som matchar min ordlista.

Jag har en en.ts-fil:

const en = { blabla: 'blabla' }

Med denna konfiguration:

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

import enּTranslation from './en';

i18n.use(initReactI18next).init({
    resources: {
        en: {
            translation: enּTranslation,
        },
    },
    lng: 'en',
    keySeparator: '.',
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

Men TypeScript använder inte stark typ för useTranslation-hooken.

Jag har också konfigurerat @types/react-i18n/index.d.ts-filen:

import 'react-i18next';

import type dictionary from '../../src/i18n/en';

declare module 'react-i18next' {
    interface CustomTypeOptions {
        resources: typeof dictionary;
    }
}

och konfigurerade tsconfig.json-filen:

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "baseUrl": "./",
        "jsx": "react-jsx",
        "paths": {
            "@/interfaces/*": ["src/interfaces/*"],
            "@/ui/*": ["src/components/ui/*"],
            "@/containers/*": ["src/components/containers/*"],
            "@/layout/*": ["src/components/layout/*"],
            "@/data/*": ["src/data/*"],
            "@/utils/*": ["src/utils/*"],
            "@/store/*": ["src/store/*"],
            "@/images/*": ["src/assets/images/*"],
            "@/assets/*": ["src/assets/*"],
            "@/hooks/*": ["src/hooks/*"],
            "@/models/*": ["src/models/*"],
            "@/styles/*": ["src/styles/*"]
        },
        "typeRoots": ["./@types", "./node_modules/@types"],
        "plugins": [{ "name": "typescript-plugin-css-modules" }]
    }
}

De paket jag använder är uppdaterade

Svar #1

Ändra declare module 'react-i18next' { till declare module 'i18next' {

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

Relaterade artiklar