babel-plugin-ts-definitions-to-proptypes
A Babel plugin to generate React PropTypes from TypeScript definitinos.
Examples
// Example.d.ts// Before; // After;; const Props = name: PropTypesstring;
// Example.js;; Component static propTypes = Props; { return <div />; }
Requirements
- Babel 7+
- TypeScript 2+
Installation
npm i -D babel-plugin-ts-definitions-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.jsconst plugins = ; if processenvNODE_ENV !== 'production' plugins; moduleexports = // 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[]
.
moduleexports = plugins: 'babel-plugin-ts-definitions-to-proptypes' customPropTypeSuffixes: 'Shape' ;
// Before;; const NameShape = PropTypesstring; interface Props name?: NameShape; Component<Props> { return <div />; } // After;; const NameShape = PropTypesstring; Component static propTypes = name: NameShape ; { return <div />; }