从使用“prop-types”的 JS React 组件生成类型定义

Question

我们有一个像这样的组件：

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

export default class Tooltip extends React.Component {
  static propTypes = {
    /**
     * Some children components
     */
    children: PropTypes.node.isRequired,
    /**
     * Some property
     */
    someProp: PropTypes.string,
   }

   .....

}

是否有一些工具可以为打字稿声明文件启用类型生成，以生成类似以下内容的内容：

interface ITooltip {
    children: React.Node,
    someProp: string
}

一些参考：

• https://github.com/salesforce/design-system-react/issues/1346
• https://github.com/Microsoft/dts-gen
• https://github.com/KnisterPeter/react-to-typescript-definitions

Answer 1

如果安装，@types/prop-types您可以使用InferProps泛型类型来生成如下类型：

import { InferProps } from "prop-types"

type ITooltip = InferProps<typeof Tooltip.propTypes>

// or interfaces if that's what you prefer:
// interface ITooltip extends InferProps<typeof Tooltip.propTypes> {}

由于 的输入，该类型更加冗长prop-types，但它会为您提供正确的使用结果。