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.

// babel.config.js
module.exports = function() {
  const plugins = [];

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

  return {
    // 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.