CODEWITHSUNDEEP
javascriptreactjstypescriptreact-proptypes
coler-j
coler-j

Reputation: 2119

Generate type definitions from JS React components that use `prop-types`

We have a component like:

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,
   }

   .....

}

Is there some tooling to enable type generation to a typescript declaration file to generate something like:

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

Some reference:

Upvotes: 7

Views: 1845

Answers (1)

ddprrt
ddprrt

Reputation: 7574

If you install @types/prop-types you can use the InferProps generic type to generate types like that:

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> {}

The type is more verbose due to typings of prop-types, but it gives you the correct result in usage.

Upvotes: 3

Related Questions