React本机上的react-i18 next没有与此调用类型脚本匹配的重载

zi8p0yeb 于 2022-12-19 发布在 React

关注(0)|答案(4)|浏览(186)

我正在尝试使用 typescript 4.1.2在我的React原生应用中配置react-i18 next 11.8.2：

i18n.use(initReactI18next).init({
  resources: {
    en,
    es,
  },
  lng: 'es',
  fallbackLng: 'es',
  interpolation: {
    escapeValue: false,
  },
});

具有两个资源文件（en，es）。
但是我在使用useTranslation钩子的TFunction接口中遇到了一个打字错误：

const {t, i18n} = useTranslation(['SelectLanguage']);]

<StyledLabel>{t('SelectLanguage:title')}</StyledLabel>

错误：

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<TextProps & RefAttributes<Text>, "key" | "ref" | "style" | "onLayout" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | ... 35 more ... | "dataDetectorType"> & Partial<...>, "key" | ... 42 more ... | "dataDetectorType"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'TFunctionResult' is not assignable to type 'string | number | TextElement | ChildElement[] | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | ... 20 more ... | undefined'.
      Type 'null' is not assignable to type 'string | number | TextElement | ChildElement[] | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | ... 20 more ... | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Text, any, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof Text, any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type 'TFunctionResult' is not assignable to type 'string | number | TextElement | ChildElement[] | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | ... 20 more ... | undefined'.
      Type 'null' is not assignable to type 'string | number | TextElement | ChildElement[] | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | ... 20 more ... | undefined'.ts(2769)
text.component.d.ts(15, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Pick<Pick<TextProps & RefAttributes<Text>, "key" | "ref" | "style" | "onLayout" | "testID" | ... 38 more ... | "dataDetectorType"> & Partial<...>, "key" | ... 42 more ... | "dataDetectorType"> & { ...; } & { ...; } & { ...; }'
text.component.d.ts(15, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Pick<Pick<TextProps & RefAttributes<Text>, "key" | "ref" | "style" | "onLayout" | "testID" | ... 38 more ... | "dataDetectorType"> & Partial<...>, "key" | ... 42 more ... | "dataDetectorType"> & { ...; } & { ...; } & { ...; }'

我可以通过如下解析i18 n翻译的结果来解决这个错误：

<StyledLabel>{t<string>('SelectLanguage:title')}</StyledLabel>

您知道为什么会发生这种情况吗？我认为可能是StyledLabel prop ，它只是@ui-kitten/components Text的样式化组件

import styled from 'styled-components/native';
import {Text} from '@ui-kitten/components';

export const StyledLabel = styled(Text)`
  margin-bottom: 5px;
`;

UI Kitten文本组件：

export declare class Text extends React.Component<TextProps> {
    render(): React.ReactElement<RNTextProps>;
}
export {};

react-native

来源：https://stackoverflow.com/questions/65224455/react-i18next-on-react-native-no-overload-matches-this-call-typescript

4条答案

按热度按时间

h5qlskok1#

在错误消息中，您可以找到问题所在。
类型“TFunctionResult”不可分配给类型“string|数|文本元素|子元素[]|（字符串& {}）|（字符串和React元素〈任何，字符串
TFunctionResult仅接受字符串
解决方案：您需要始终发送一个字符串并将其作为string引用

<StyledLabel>{t<string>('SelectLanguage:title')}</StyledLabel>

第二种溶液

<StyledLabel>{`${t('SelectLanguage:title')}`}</StyledLabel>

赞(0）回复(0）举报 2022-12-19

rdrgkggo2#

创建React-i18 next.d.ts

import "react-i18next";

import type * as translations from "locales";

declare module "react-i18next" {
  type DefaultResources = typeof translations;
  interface Resources extends DefaultResources {}
}

declare module "react-i18next" {
  type Namespace = keyof typeof translations;
  type Keys<N extends Namespace> = keyof typeof translations[N];

  interface TFunction<
    TResult extends TFunctionResult = string,
    TKeys extends TFunctionKeys = string,
    TInterpolationMap extends object = StringMap
  > {
    // basic usage
    (key: TKeys | TKeys[], options?: TOptions<TInterpolationMap> | string): TResult;
    // overloaded usage
    (key: TKeys | TKeys[], defaultValue?: string, options?: TOptions<TInterpolationMap> | string): TResult;
  }

  type UseTranslationResult<N> = {
    t: TFunction<string, Keys<N>>;
    i18n: i18n;
    ready: boolean;
  };
  export function useTranslation<N extends Namespace>(ns: N, options?: UseTranslationOptions): UseTranslationResult<N>;
}

赞(0）回复(0）举报 2022-12-19

u5rb5r593#

另一种解决方案是使用withTranslation

import React from "react";
import { Link, Redirect } from "react-router-dom";
import "./Screen.css";
import ImageHolder from "../../../../assets/imageholder.png";
import { withTranslation } from "react-i18next";

export interface Screen3Props {
  t: any;
}

const Screen3: React.FunctionComponent<Screen3Props> = ({ t }: Screen3Props) => {
  const [redirect, setRedirect] = React.useState(false);
  return (
    <div className="ms-welcome initPage">
      <p className="h1">{t("SEARCH_PRIMARY_TEXT")}</p>
      <p className="h2">{t("SEARCH_SECONDARY_TEXT")}</p>
    </div>
  );
};

export default withTranslation()(Screen3);

赞(0）回复(0）举报 2022-12-19

b1uwtaje4#

在我的例子中，我使用的是^18版本的React类型。如果您使用的是React 17，请使用正确的版本：

"@types/react": "17.0.19",
    "@types/react-dom": "17.0.9",

赞(0）回复(0）举报 2022-12-19

我来回答

React本机上的react-i18 next没有与此调用类型脚本匹配的重载

4条答案

相关问题

热门标签

最新问答