使用来自 prop-types 的 InferProps<> 时，键入 props 会传播答案

【问题标题】：Typing props spread when using InferProps<> from prop-types使用来自 prop-types 的 InferProps<> 时，键入 props 会传播
【发布时间】：2020-06-26 03:54:35
【问题描述】：

我想在我的 typescript react 项目中保留 proptypes（以提供运行时 prop 类型检查）。但是我只想输入一次道具，所以我使用来自prop-types 的InferProps。在这种情况下如何正确键入传播道具？编译器在这里正确地抱怨Property 'type' does not exist on type '{}'。在此上下文中未定义 props.type 是可以的。

const propTypes = {
  component: PropTypes.any,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
};

const FormikField = ({
  component: Component = Input,
  name,
  value,
  ...props
}: InferProps<typeof propTypes>): JSX.Element => {
  const [field, meta] = useField({ name, type: props.type, value });
  return (
    <Component
      error={meta.touched ? meta.error : null}
      {...field}
      {...props}
    />
  );
};

FormikField.propTypes = propTypes;

【问题讨论】：

需要在useField函数中输入吗？如果不删除它:)。在 proptypes 中添加类型作为可选怎么样？
@KarlGalvez 肯定解决了props.type 的直接问题，而编译器现在似乎并不关心...props。也许不需要显式键入传播道具？
也许吧？我在项目中遇到了相同类型的问题。这似乎是类型安全和传播道具的易用性/有用性之间的平衡。例如，添加所有的 props 和类型会使维护变得有点乏味，因为我们必须添加 propTypes，但另一方面，我们的组件应该只使用我们定义的 props。类型还有助于 IDE 自动完成和组件保持真实的界面。在您的示例中，我认为使用 props.type 是“不好的做法”，因为它没有在 propTypes 中定义。可能有更好的方法，如果有，希望你找到（并分享）！

标签： reactjs typescript react-proptypes

【解决方案1】：

你可以试试这个

import { FC } from 'react';

type propTypes = {
  component: PropTypes.any,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
};

const FormikField: FC<propTypes & PropTypes.any> = ({
  component: Component = Input,
  name,
  value,
  ...props
}: JSX.Element => {
  const [field, meta] = useField({ name, type: props.type, value });
  return (
    <Component
      error={meta.touched ? meta.error : null}
      {...field}
      {...props}
    />
  );
};

【讨论】：

我认为这不会保留组件上的 propTypes，然后我不能将 propTypes 分配给 FormikField.propTypes。目标是同时拥有 prop-types 验证、和类型化组件 props。
@BayardRandel 我已经更新了答案，你能检查一下吗？
你也不能将type分配给FormikField.propTypes，它必须是一个propTypes对象。