如何在 Typescript 中使用 PropTypes.shape

Question

我正在将 React 应用程序从 Javascript 重构为 Typescript，但在迁移时遇到了一些麻烦，尤其是shape PropType。 我的代码现在看起来像这样：

import React from 'react';
import PropTypes from 'prop-types';

interface FooterProps {
  labels: FooterLabels;
}

interface FooterLabels {
  body: string;
}

const Footer: React.FC<FooterProps> = ({ labels }) => (
  <div className="footer">
    {/* ... */}
  </div>
);

Footer.propTypes = {
  labels: PropTypes.shape({
    body: PropTypes.string.isRequired
  }).isRequired
};

export default Footer;

但是我在 PropTypes 中遇到错误：

Type 'Validator<InferProps<{ body: Validator<string>; }>>' is not assignable to type 'Validator<FooterLabels>'.
  Type 'InferProps<{ body: Validator<string>; }>' is not assignable to type 'FooterLabels'.
    Property 'body' is optional in type 'InferProps<{ body: Validator<string>; }>' but required in type 'FooterLabels'.ts(2322)
FooterAppPromo.tsx(5, 3): The expected type comes from property 'labels' which is declared here on type 'WeakValidationMap<FooterProps>'

我是 Typescript 的新手，所以有时我真的不知道自己在做什么，但我尝试做以下事情：

Footer.propTypes = {
  labels: PropTypes.shape<FooterLabels>({
    body: PropTypes.string.isRequired
  }).isRequired
};

但我收到了错误。 我尝试搜索示例实现，但找不到任何实现。

编辑

Typescript 类型和 PropTypes不是一回事。 您可以轻松编写一个示例，其中 Typescript 验证通过，但您仍会收到 PropTypes 警告（例如，返回数字的外部 API 应该是字符串）。 这里有两篇文章解释了原因：

• TypeScript React 应用程序中的 PropTypes
• https://fettblog.eu/typescript-react/prop-types/

所以我的问题是如何使嵌套的 PropTypes 对象（ PropTypes.shape()或PropTypes.objectOf() ）与 TypeScript 一起使用？

Answer 1

PropTypes 错误是因为您尝试使用PropType.shape ，该形状允许您在形状上具有可选值，在这种情况下，您的接口是严格的，这意味着您没有任何类型的可选值，并且React.Validator试图用你的接口推断你的类型，这导致错误出现。

简单地说，如果你有非可选值的严格的接口，而是采用PropType.shape你应该使用PropType.exact并应防止错误。

例如：

Footer.propTypes = {
  labels: PropTypes.exact({
    body: PropTypes.string
  }).isRequired
};

出于这个原因，您的错误消息出现

属性 'body' 在类型 'InferProps<{ body: Validator; 中是可选的。 }>' 但在类型 'FooterLabels'.ts(2322) 中是必需的

已编辑

发生这种情况只是因为您在组件上使用了const Footer: React.FC<FooterProps> = ({ labels }) => (

查看接口的 FC（FunctionComponent Interface）表示为

interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

我们应该在这里强调的propTypes?: WeakValidationMap<P>;行是propTypes?: WeakValidationMap<P>; 这是根据我们的 PropTypes 推断我们的类型。

你有第二个选择在 React 上使用类型，但我不推荐它，你可以使用ReactNode类型代替 FC，但你会丢失你对 FC 接口类型推断的推断。

EG function Footer = ({ labels }:FooterProps): ReactNode => (

Answer 2

实际上，这里不需要propTypes - labels只有一个嵌套的字段body typeof FooterLabels 。

interface FooterProps {
  labels: {
     body: FooterLabels;
  };
}

Answer 3

interface FooterProps {
  labels: PropTypes.InferProps<{ body: string }>
}