javascript - 从使用 `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

标签： javascriptreactjstypescriptreact-proptypes

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，但它为您提供了正确的使用结果。