Package Exports

babel-plugin-typescript-to-proptypes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-typescript-to-proptypes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-typescript-to-proptypes

A Babel plugin to generate React PropTypes from TypeScript interfaces or type aliases.

Examples

Supports class components that define generic props.

// Before
import React from 'react';

interface Props {
  name?: string;
}

class Example extends React.Component<Props> {
  render() {
    return <div />;
  }
}

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

class Example extends React.Component {
  static propTypes = {
    name: PropTypes.string,
  };

  render() {
    return <div />;
  }
}

Stateless function components that annotate the props argument.

// Before
import React from 'react';

interface Props {
  name: string;
}

function Example(props: Props) {
  return <div />;
}

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

function Example(props) {
  return <div />;
}

Example.propTypes = {
  name: PropTypes.string.isRequired,
};

And anonymous functions that are annotated as a React.SFC.

// Before
import React from 'react';

type Props = {
  name?: string,
};

const Example: React.SFC<Props> = props => <div />;

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

const Example = props => <div />;

Example.propTypes = {
  name: PropTypes.string,
};

Requirements

Babel 7+
TypeScript 2+

Installation

yarn add --dev babel-plugin-typescript-to-proptypes
// Or
npm install --save-dev babel-plugin-typescript-to-proptypes

Usage

Add the plugin to your Babel config. It's preferred to enable this plugin for development only, or when building a library.

// babel.config.js
const plugins = [];

if (process.env.NODE_ENV !== 'production') {
  plugins.push('babel-plugin-typescript-to-proptypes');
}

module.exports = {
  // Required
  presets: ['@babel/preset-typescript', '@babel/preset-react']
  plugins,
};

When transpiling down to ES5 or lower, the @babel/plugin-proposal-class-properties plugin is required.

Options

customPropTypeSuffixes (string[]) - Reference custom types directly when they match one of the provided suffixes. This option requires the type to be within the file itself, as imported types would be automatically removed by Babel. Defaults to [].

module.exports = {
  plugins: [['babel-plugin-typescript-to-proptypes', { customPropTypeSuffixes: ['Shape'] }]],
};

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

const NameShape = PropTypes.string;

interface Props {
  name?: NameShape;
}

class Example extends React.Component<Props> {
  render() {
    return <div />;
  }
}

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

const NameShape = PropTypes.string;

class Example extends React.Component {
  static propTypes = {
    name: NameShape,
  };

  render() {
    return <div />;
  }
}

forbidExtraProps (boolean) - Automatically wrap all propTypes expressions with airbnb-prop-types forbidExtraProps, which will error for any unknown and unspecified prop. Defaults to false.

module.exports = {
  plugins: [['babel-plugin-typescript-to-proptypes', { forbidExtraProps: true }]],
};

// Before
import React from 'react';

interface Props {
  name?: string;
}

class Example extends React.Component<Props> {
  render() {
    return <div />;
  }
}

// After
import React from 'react';
import PropTypes from 'prop-types';
import { forbidExtraProps } from 'airbnb-prop-types';

class Example extends React.Component {
  static propTypes = forbidExtraProps({
    name: PropTypes.string,
  });

  render() {
    return <div />;
  }
}