如何将 PropTypes.shape 与 Typescript 一起使用

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，其中应该是字符串）。这里有两篇文章解释了原因：

• PropTypes in a TypeScript React Application
• 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' 但在 '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 推断我们的类型的行。

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

例如 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 }>
}