reactjs 类型“TFunctionDetailedResult”的React类型脚本参数< object>不能赋值给类型react-i18 next的参数

3ks5zfa0  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(156)

我在我的项目的很多地方都有这个代码片段。直到我升级了我所有的包,包括react-scriptstypescriptreact-i18next,这个代码片段都没有任何问题。

import _get from 'lodash/get';
const { translate } = useLocales();

  translate(
          _get(error, 'response.data.validationFailures.0.field')  ,
          _get(error, 'response.data.validationFailures.0.code') 
        ),

我得到的错误是
类型为“TFunctionDetailedResult”的参数不能赋值给类型为“SnackbarMessage”的参数。
创建_get(error, 'response.data.validationFailures.0.field') as String也不能解决问题。
但我以前也有过类似的问题,

.required(translate('validations.organization.name', 'Organization name is required.'))

这里我得到了这个错误消息
类型为“DefaultTFuncReturn”的参数无法分配给类型为“Message〈{}〉”的参数|未定义'。
我已通过将此文件添加到项目中解决了此错误

i18下一个日期

import 'i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false;
    
  }
}

问题是validations.organization.name将返回null。因此,在重写后,这不会返回null,该问题已得到修复。希望如果我声明_get方法始终返回字符串,错误将得到修复。我如何做到这一点?
另外,_get方法不会总是返回一个字符串。它返回路径中的内容。所以覆盖也不会是全局覆盖。

mum43rcc

mum43rcc1#

TFunctionDetailedResult类型是i18next.t转换函数可能返回的类型之一。i18next.t可以返回几种不同的类型,这取决于您提供的options。具体来说,我们在这里关注的选项是returnDetails
如果在选项中使用{ returnDetails: true }调用t,则将返回类型为TFunctionDetailedResult的结果对象。

export type TFunctionDetailedResult<T = string> = {
  /**
   * The plain used key
   */
  usedKey: string;
  /**
   * The translation result.
   */
  res: T;
  /**
   * The key with context / plural
   */
  exactUsedKey: string;
  /**
   * The used language for this translation.
   */
  usedLng: string;
  /**
   * The used namespace for this translation.
   */
  usedNS: string;
};

如您所见,.res属性包含了转换的实际结果,因此您可以使用result.res作为消息来调用snackbar。
如果使用{ returnDetails: false }选项调用t,或者根本不指定此选项,因为false是默认值,则只能返回一个string
在您的代码中,您需要的是string类型,但得到的是TFunctionDetailedResult类型。我不清楚这是TypeScript错误,而您的结果实际上是string,还是TypeScript类型正确,而您得到的是此results对象。
如果是TypeScript错误(您的变量实际上是string,但其类型为TFunctionDetailedResult):

  • 确保从useLocales钩子返回的translate函数具有(...keys: string[]): string类型。

如果是实际错误(变量是TFunctionDetailedResult对象):

  • 您可以将其保留为一个对象,并将该对象的.res属性用于snackbar。
  • 您可以修改t调用上的选项,以便获得string结果。

您对lodash_get类型的问题对我来说似乎是次要的。它确实对此进行了一些处理,并为error变量定义了一个准确的类型。

interface ErrorType {
  response: {
    data: {
      validationFailures: Array<{
        field: string;
        code: string; // or is it a number?
      }>
    }
  }
}

奇怪的是,这给了我正确的_get(error, 'response.data.validationFailures.0')类型,但没有给下一级的_get(error, 'response.data.validationFailures.0.field')类型,我不明白。

const { translate } = useLocales();

const failure = _get(error, 'response.data.validationFailures.0');
if (!failure) {
  // do something if you don't have an error message
}
const text = translate(failure.field, failure.code);

Typescript Playground

相关问题