typescript react-i18 next-指定`string`类型时,没有重载匹配此调用

56lgkhnf  于 2023-05-08  发布在  TypeScript
关注(0)|答案(1)|浏览(111)

我使用react-i18nextReactTypeScript。如果我尝试使用字符串文字和类型推断加载属性,它可以正常工作。但是,如果我指定string类型,则会抛出错误。

i18n.ts

import ns1 from './locales/en/translation.json';
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';

export const defaultNS = 'ns1';

export const resources = {
  en: {
    ns1
  }
} as const;
i18n.use(initReactI18next).init({
  lng: 'en',
  ns: ['ns1', 'ns2'],
  defaultNS,
  resources
});

react-i18next.d.ts

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

// react-i18next versions higher than 11.11.0
declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: typeof defaultNS;
    resources: typeof resources['en'];
  }
}

translation.json

{
  "title": "Welcome to react using react-i18next",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and german using buttons above."
  }
}

工作编码

import { useTranslation } from 'react-i18next';

const t = useTranslation().t;
const title = 'title';

// "Welcome to react using react-i18next"
console.log(t(title));

没有重载匹配此调用异常

import { useTranslation } from 'react-i18next';

const t = useTranslation().t;
const title: string = 'title';

// No overload matches this call exception
console.log(t(title));

如何翻译指定类型的string变量?

tv6aics1

tv6aics11#

我想问题是你使用的是string类型,这意味着它可以是任何东西。I18next使用字符串文字类型来检查类型。
如果你想让类型在project中工作,但有时会使用动态翻译,现在你可以用标记模板文字来欺骗你的方式,因为它现在不能用于类型检查:

t`key1.key2`;

基于i18文档
另一种选择是将t函数上的类型覆盖为任何类型:

t<any>(`namespace:${dynamicString}`)

相关问题