'TFunctionDetailedResult<object>' 类型的 React Typescript 参数不能分配给 react-i18next 类型的参数

Question

我在项目的许多地方都有这个代码片段。这个工作没有任何问题，直到我升级了所有的软件包，包括react-scripts、typescript和react-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<{}>|未定义"。

我已经解决了这个错误，将这个文件添加到项目

i18next.d.ts

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

}
}  

问题是validations.organization.name会返回null。因此，在重写这没有返回null之后，问题得到了修复。希望如果我声明_get方法总是返回一个字符串的错误将修复。我怎么做呢?

_get方法也不会总是返回字符串。它返回路径中的东西。所以重写也不会是全局重写。

Answer 1

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作为消息来调用你的零食吧。

如果您使用{ returnDetails: false }选项调用t，或者如果您根本不指定该选项，则可以返回string，因为false是默认值。

---

在您的代码中，您期望string类型，但获得TFunctionDetailedResult类型。我不清楚这是否是一个TypeScript错误，你的结果实际上是一个string，或者如果TypeScript类型是正确的，你正在得到这个结果对象。

如果是TypeScript错误(你的变量实际上是string，但它的类型是TFunctionDetailedResult):

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

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

• 你可以把它作为一个对象，并使用.res属性的对象为你的零食吧。
• 你可以修改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);

打印稿操场