A Babel plugin to generate React PropTypes from TypeScript interfaces or type aliases.
Does not support converting external type references (as Babel has no type information) without the
typeCheck
option being enabled.
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,
};
- Babel 7+
- TypeScript 2+
yarn add --dev babel-plugin-typescript-to-proptypes
// Or
npm install --save-dev babel-plugin-typescript-to-proptypes
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.
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 { NameShape } from './shapes';
interface Props {
name?: NameShape;
}
class Example extends React.Component<Props> {
render() {
return <div />;
}
}
// After
import React from 'react';
import { NameShape } from './shapes';
class Example extends React.Component {
static propTypes = {
name: NameShape,
};
render() {
return <div />;
}
}
forbidExtraProps
(boolean) - Automatically wrap allpropTypes
expressions with airbnb-prop-typesforbidExtraProps
, which will error for any unknown and unspecified prop. Defaults tofalse
.
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 />;
}
}
maxDepth
(number) - Maximum depth to convert while handling recursive or deeply nested shapes. Defaults to3
.
module.exports = {
plugins: [['babel-plugin-typescript-to-proptypes', { maxDepth: 3 }]],
};
// Before
import React from 'react';
interface Props {
one: {
two: {
three: {
four: {
five: {
super: 'deep',
},
},
},
},
};
}
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 = {
one: PropTypes.shape({
two: PropTypes.shape({
three: PropTypes.object,
}),
}),
};
render() {
return <div />;
}
}
typeCheck
(boolean|string) - NOT FINISHED Resolve full type information for aliases and references using TypeScript's built-in type checker. When enabled withtrue
, will glob for files using./src/**/*.ts
. Glob can be customized by passing a string. Defaults tofalse
.
Note: This process is heavy and may increase compilation times.
module.exports = {
plugins: [['babel-plugin-typescript-to-proptypes', { typeCheck: true }]],
};
// Before
import React from 'react';
import { Location } from './types';
interface Props {
location?: Location;
}
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 = {
location: PropTypes.shape({
lat: PropTypes.number,
long: PropTypes.number,
}),
};
render() {
return <div />;
}
}