Registry / web-framework / babel-plugin-typescript-to-proptypes

babel-plugin-typescript-to-proptypes

library2.1.0jsnpmunverified

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.

web-framework serialization

npm install babel-plugin-typescript-to-proptypes

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TYPES

babel-plugin-typescript-to-proptypes

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-typescript-to-proptypes

✓ plugins.push('babel-plugin-typescript-to-proptypes');

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`).

babel-plugin-typescript-to-proptypes options

✓ plugins.push(['babel-plugin-typescript-to-proptypes', { comments: true }]);

Plugin options are passed as a second element in the array when configuring the plugin in Babel. Options like `comments` or `mapUnknownReferenceTypesToAny` are available.

PropTypes

✓ import PropTypes from 'prop-types';

✗ const PropTypes = require('prop-types');

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.

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.

import React from 'react'; import PropTypes from 'prop-types'; interface MyComponentProps { /** A required string prop */ name: string; count?: number; isActive: boolean; } function MyComponent(props: MyComponentProps) { return ( <div> <p>Hello, {props.name}</p> {props.count && <p>Count: {props.count}</p>} {props.isActive ? <p>Active</p> : <p>Inactive</p>} </div> ); } // babel.config.js (config for the plugin) // This quickstart demonstrates the *before* and *after* for the plugin. // To actually run the plugin, you'd need a Babel setup. // Add this to your Babel configuration's plugins array: // plugins: [ // '@babel/preset-typescript', // '@babel/preset-react', // process.env.NODE_ENV !== 'production' && ['babel-plugin-typescript-to-proptypes', { comments: true }], // ].filter(Boolean), // Expected output after plugin execution (simplified): // MyComponent.propTypes = { // /** A required string prop */ // name: PropTypes.string.isRequired, // count: PropTypes.number, // isActive: PropTypes.bool.isRequired, // }; export default MyComponent;

Debug

Known issues

breakingVersion 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.

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`.

affects: >=2.0.0

gotchaThis 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.

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.

affects: >=1.0.0

gotchaRequires 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.

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.

affects: >=1.0.0

gotchaIt 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.

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'`.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Plugin 'babel-plugin-typescript-to-proptypes' not found

The plugin is not correctly installed or referenced in the Babel configuration.

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`.

Warning: Failed prop type: The prop `myProp` is marked as required in `MyComponent`, but its value is `undefined`.

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.

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.

ReferenceError: PropTypes is not defined

The generated PropTypes code relies on the `prop-types` package, but it's not imported or available in the runtime environment.

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.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for any Babel plugin.

typescriptrequiredRequired peer dependency to parse TypeScript syntax. Supports ^4.0.0 || ^5.0.0.

prop-typesoptionalThe plugin generates code that uses `prop-types`, so it must be available at runtime if the generated code is executed.

reactoptionalThe plugin transforms React component syntax, so React is an implicit dependency for the source code being processed.

Agent activity

25 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/milesj/babel-plugin-typescript-to-proptypes ↗

packagehttps://www.npmjs.com/package/babel-plugin-typescript-to-proptypes ↗