{"id":10551,"library":"babel-plugin-typescript-to-proptypes","title":"Babel Plugin: TypeScript to PropTypes","description":"babel-plugin-typescript-to-proptypes is a Babel plugin designed to automatically generate React PropTypes from TypeScript interfaces and type aliases within your React components. This tool is particularly useful for projects that want to leverage TypeScript for type safety during development while still providing runtime PropTypes for environments that rely on them (e.g., older React versions, certain testing setups, or for debugging purposes). The current stable version is 2.1.0, and it maintains an active release cadence with frequent updates for Babel and TypeScript compatibility. A key differentiator is that it operates solely on the Babel AST, meaning it does not run TypeScript's type checker and therefore cannot resolve type information referenced from external files. It integrates directly into your Babel build pipeline.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/milesj/babel-plugin-typescript-to-proptypes","tags":["javascript","babel-plugin","typescript","interfaces","prop-types","react"],"install":[{"cmd":"npm install babel-plugin-typescript-to-proptypes","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-typescript-to-proptypes","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-typescript-to-proptypes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for any Babel plugin.","package":"@babel/core","optional":false},{"reason":"Required peer dependency to parse TypeScript syntax. Supports ^4.0.0 || ^5.0.0.","package":"typescript","optional":false},{"reason":"The plugin generates code that uses `prop-types`, so it must be available at runtime if the generated code is executed.","package":"prop-types","optional":true},{"reason":"The plugin transforms React component syntax, so React is an implicit dependency for the source code being processed.","package":"react","optional":true}],"imports":[{"note":"This is a Babel plugin, not a direct JavaScript import. It's configured as a string in your Babel configuration file (e.g., `babel.config.js`).","symbol":"babel-plugin-typescript-to-proptypes","correct":"plugins.push('babel-plugin-typescript-to-proptypes');"},{"note":"Plugin options are passed as a second element in the array when configuring the plugin in Babel. Options like `comments` or `mapUnknownReferenceTypesToAny` are available.","symbol":"babel-plugin-typescript-to-proptypes options","correct":"plugins.push(['babel-plugin-typescript-to-proptypes', { comments: true }]);"},{"note":"This is the import for the `prop-types` library, which the plugin's *output* code will use. Ensure `prop-types` is installed and imported in the generated or runtime code.","wrong":"const PropTypes = require('prop-types');","symbol":"PropTypes","correct":"import PropTypes from 'prop-types';"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\n\ninterface MyComponentProps {\n  /** A required string prop */\n  name: string;\n  count?: number;\n  isActive: boolean;\n}\n\nfunction MyComponent(props: MyComponentProps) {\n  return (\n    <div>\n      <p>Hello, {props.name}</p>\n      {props.count && <p>Count: {props.count}</p>}\n      {props.isActive ? <p>Active</p> : <p>Inactive</p>}\n    </div>\n  );\n}\n\n// babel.config.js (config for the plugin)\n// This quickstart demonstrates the *before* and *after* for the plugin.\n// To actually run the plugin, you'd need a Babel setup.\n// Add this to your Babel configuration's plugins array:\n// plugins: [\n//   '@babel/preset-typescript',\n//   '@babel/preset-react',\n//   process.env.NODE_ENV !== 'production' && ['babel-plugin-typescript-to-proptypes', { comments: true }],\n// ].filter(Boolean),\n\n// Expected output after plugin execution (simplified):\n// MyComponent.propTypes = {\n//   /** A required string prop */\n//   name: PropTypes.string.isRequired,\n//   count: PropTypes.number,\n//   isActive: PropTypes.bool.isRequired,\n// };\n\nexport default MyComponent;","lang":"typescript","description":"Demonstrates a simple React functional component with a TypeScript interface, showing the input code that the plugin transforms into code with `PropTypes`. The Babel configuration snippet shows how to enable the plugin, typically outside of production builds."},"warnings":[{"fix":"Upgrade TypeScript to v4.0.0 or v5.0.0 and Node.js to v12.17.0 or higher. Alternatively, pin your dependency to `babel-plugin-typescript-to-proptypes@^1`.","message":"Version 2.0.0 dropped support for TypeScript v3 and Node.js v10. Users on these older environments must upgrade their toolchain or remain on `babel-plugin-typescript-to-proptypes` v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure all TypeScript interfaces and type aliases used for component props are declared directly within the same `.tsx` or `.ts` file as the React component itself. Avoid importing prop types from other modules if you expect them to be converted.","message":"This plugin operates on Babel's Abstract Syntax Tree (AST) and does NOT run TypeScript's full type checker. This means it cannot resolve type information for props or types referenced from external files. All relevant type definitions must be within the same file as the component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Include `@babel/preset-react` in your Babel presets array. If you are targeting older JavaScript environments, also add `@babel/plugin-proposal-class-properties` to your plugins.","message":"Requires either `@babel/plugin-syntax-jsx` or `@babel/preset-react` to parse JSX syntax. If transpiling to ES5 or lower, `@babel/plugin-proposal-class-properties` is also required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap the plugin inclusion in your Babel config with an environment check, e.g., `process.env.NODE_ENV !== 'production' && 'babel-plugin-typescript-to-proptypes'`.","message":"It is generally recommended to enable this plugin only for development environments or when building a library, not for production application builds, as PropTypes add to bundle size and are typically not needed in production.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `babel-plugin-typescript-to-proptypes` is installed as a dev dependency (`npm install --save-dev babel-plugin-typescript-to-proptypes` or `yarn add --dev babel-plugin-typescript-to-proptypes`) and the name is correctly spelled in `babel.config.js` or `.babelrc`.","cause":"The plugin is not correctly installed or referenced in the Babel configuration.","error":"Error: Plugin 'babel-plugin-typescript-to-proptypes' not found"},{"fix":"Ensure that all props marked as required in your TypeScript interface are always provided with a valid value when `MyComponent` is used. This is a logic error in your React component usage, not necessarily a plugin error.","cause":"This is a runtime warning from `prop-types` itself, indicating that a required prop was not provided or was `undefined` at runtime after the plugin has generated the PropTypes.","error":"Warning: Failed prop type: The prop `myProp` is marked as required in `MyComponent`, but its value is `undefined`."},{"fix":"Make sure `prop-types` is installed (`npm install prop-types` or `yarn add prop-types`) and that `import PropTypes from 'prop-types';` (or `const PropTypes = require('prop-types');`) is present in the file that consumes the generated PropTypes. The plugin *adds* the `import` statement for you, but the package still needs to be installed.","cause":"The generated PropTypes code relies on the `prop-types` package, but it's not imported or available in the runtime environment.","error":"ReferenceError: PropTypes is not defined"}],"ecosystem":"npm"}