2

我正在尝试将 react-i18next 与 Typescript 一起使用，但遇到了一些问题。

这是我期待的道具的界面。

import * as i18n from 'i18next';

export interface ReactI18nProps {
  t: i18n.TFunction;
}

然后我有一个导航组件，由我编写。

import { translate } from 'react-i18next';

function Navigation({ t }: ReactI18nProps) {
  const userProfile = JSON.parse(localStorage.getItem('profile') || '');
  return (
    ...
  );
}

export default translate('navigation')(Navigation);

现在我只想渲染这个我已经组成的组件

function Appliances({ location }: NavLinkProps) {
  const userId = location && location.state.userId;
  return (
    <div>
      <Navigation />
    </div>
  );
}

但是，在这个时刻，TS 失败了，我收到以下错误

Type '{}' is not assignable to type 'IntrinsicAttributes & ReactI18nProps'.
  Type '{}' is not assignable to type 'ReactI18nProps'.
    Property 't' is missing in type '{}'.

有人可以解释我做错了什么。

4

1 回答 1

3

正如错误消息所示：

类型“{}”中缺少属性“t”

您的组件期望道具是：

interface ReactI18nProps {
    t: i18n.TFunction;
}

但你没有通过这个t：

<Navigation />

您可以将此t属性设为可选：

interface ReactI18nProps {
    t?: i18n.TFunction;
}

或者满足它：

<Navigation t={ (key: string, options: i18n.TOptions) => return getTranslation(key, options) } />

编辑

基于react-i18next 翻译函数的类型定义：

function translate<TKey extends string = string>
    (namespaces?: TKey[] | TKey, options?: TOptions)
        : <C extends Function>(WrappedComponent: C) => C;

你传递的组件类型就是你返回的确切类型，这意味着使用了相同的 props 类型。
在这种情况下，您需要使用可选项t，因为有时它在没有此属性的情况下使用（当您调用它时），但随后与它一起使用t（当translate方法调用它时）。

为避免编译器抱怨t可能未定义，您可以使用非空断言运算符：

function Navigation({ t }: ReactI18nProps) {
    ...
    const translation = t!(...);
    ...
}

请注意，它使用t!而不是 just t。

于 2017-12-09T15:26:00.503 回答