{"id":13727407,"url":"https://github.com/milesj/babel-plugin-typescript-to-proptypes","last_synced_at":"2025-10-23T21:42:36.855Z","repository":{"id":46934172,"uuid":"137277081","full_name":"milesj/babel-plugin-typescript-to-proptypes","owner":"milesj","description":"Generate React PropTypes from TypeScript interfaces or type aliases.","archived":false,"fork":false,"pushed_at":"2023-04-12T17:37:48.000Z","size":3515,"stargazers_count":367,"open_issues_count":13,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T04:03:48.319Z","etag":null,"topics":["babel-plugin","prop-types","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/milesj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"milesjohnson"}},"created_at":"2018-06-13T22:13:12.000Z","updated_at":"2024-06-20T13:34:27.000Z","dependencies_parsed_at":"2024-06-18T12:48:18.850Z","dependency_job_id":null,"html_url":"https://github.com/milesj/babel-plugin-typescript-to-proptypes","commit_stats":{"total_commits":178,"total_committers":8,"mean_commits":22.25,"dds":0.101123595505618,"last_synced_commit":"19b1d69bbeee918cb06c84001383dfe52f0b195e"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesj%2Fbabel-plugin-typescript-to-proptypes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesj%2Fbabel-plugin-typescript-to-proptypes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesj%2Fbabel-plugin-typescript-to-proptypes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesj%2Fbabel-plugin-typescript-to-proptypes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/milesj","download_url":"https://codeload.github.com/milesj/babel-plugin-typescript-to-proptypes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501558,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","prop-types","react","typescript"],"created_at":"2024-08-03T01:03:54.457Z","updated_at":"2025-10-23T21:42:36.764Z","avatar_url":"https://github.com/milesj.png","language":"TypeScript","funding_links":["https://ko-fi.com/milesjohnson"],"categories":["TypeScript","Plugins"],"sub_categories":["React"],"readme":"# babel-plugin-typescript-to-proptypes\n\n[![Build Status](https://github.com/milesj/babel-plugin-typescript-to-proptypes/workflows/Build/badge.svg)](https://github.com/milesj/babel-plugin-typescript-to-proptypes/actions?query=branch%3Amaster)\n[![npm version](https://badge.fury.io/js/babel-plugin-typescript-to-proptypes.svg)](https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes)\n[![npm deps](https://david-dm.org/milesj/babel-plugin-typescript-to-proptypes.svg)](https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes)\n\nA Babel plugin to generate React PropTypes from TypeScript interfaces or type aliases.\n\n\u003e This plugin DOES NOT support converting props who's type information is referenced in another\n\u003e file, as Babel as no access to this information, and we do not run TypeScript's type checker.\n\n## Examples\n\nSupports class components that define generic props.\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tname?: string;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tname: PropTypes.string,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\nFunction components that annotate the props argument. Also supports anonymous functions without\nexplicit types (below).\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tname: string;\n}\n\nfunction Example(props: Props) {\n\treturn \u003cdiv /\u003e;\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Example(props) {\n\treturn \u003cdiv /\u003e;\n}\n\nExample.propTypes = {\n\tname: PropTypes.string.isRequired,\n};\n```\n\nAnd anonymous functions that are annotated as a `React.SFC`, `React.FC`, `React.StatelessComponent`,\nor `React.FunctionComponent`.\n\n```tsx\n// Before\nimport React from 'react';\n\ntype Props = {\n\tname?: string;\n};\n\nconst Example: React.FC\u003cProps\u003e = (props) =\u003e \u003cdiv /\u003e;\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Example = (props) =\u003e \u003cdiv /\u003e;\n\nExample.propTypes = {\n\tname: PropTypes.string,\n};\n```\n\n## Requirements\n\n- Babel 7+\n- TypeScript 3+\n\n## Installation\n\n```tsx\nyarn add --dev babel-plugin-typescript-to-proptypes\n// Or\nnpm install --save-dev babel-plugin-typescript-to-proptypes\n```\n\n## Usage\n\nAdd the plugin to your Babel config. It's preferred to enable this plugin for development only, or\nwhen building a library. Requires either the `@babel/plugin-syntax-jsx` plugin or the\n`@babel/preset-react` preset.\n\n```tsx\n// babel.config.js\nconst plugins = [];\n\nif (process.env.NODE_ENV !== 'production') {\n  plugins.push('babel-plugin-typescript-to-proptypes');\n}\n\nmodule.exports = {\n  // Required\n  presets: ['@babel/preset-typescript', '@babel/preset-react']\n  plugins,\n};\n```\n\nWhen transpiling down to ES5 or lower, the `@babel/plugin-proposal-class-properties` plugin is\nrequired.\n\n### Options\n\n#### `comments` (boolean)\n\nCopy comments from original source file for docgen purposes. Requires the `comments` option to also\nbe enabled in your Babel config. Defaults to `false`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { comments: true }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\t/** This name controls the fate of the whole universe */\n\tname?: string;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\t/** This name controls the fate of the whole universe */\n\t\tname: PropTypes.string,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `customPropTypeSuffixes` (string[])\n\nReference custom types directly when they match one of the provided suffixes. This option requires\nthe type to be within the file itself, as imported types would be automatically removed by Babel.\nDefaults to `[]`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { customPropTypeSuffixes: ['Shape'] }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\nimport { NameShape } from './shapes';\n\ninterface Props {\n\tname?: NameShape;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport { NameShape } from './shapes';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tname: NameShape,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `forbidExtraProps` (boolean)\n\nAutomatically wrap all `propTypes` expressions with\n[airbnb-prop-types](https://github.com/airbnb/prop-types) `forbidExtraProps`, which will error for\nany unknown and unspecified prop. Defaults to `false`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { forbidExtraProps: true }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tname?: string;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { forbidExtraProps } from 'airbnb-prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = forbidExtraProps({\n\t\tname: PropTypes.string,\n\t});\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `implicitChildren` (bool)\n\nAutomatically include a `children` prop type to mimic the implicit nature of TypeScript and\n`React.ReactNode`. Defaults to `false`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { implicitChildren: true }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tfoo: string;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tfoo: PropTypes.string.isRequired,\n\t\tchildren: PropTypes.node,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `mapUnknownReferenceTypesToAny` (boolean)\n\nBy default unknown reference types are omitted from the generated prop types. Sometimes though it\nmight be necessary to keep the prop in the generated prop types. In this case the prop type would be\n`any`.\n\nDefaults to `false`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { mapUnknownReferenceTypesToAny: true }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props\u003cT\u003e {\n\tas?: T;\n}\n\nclass Example\u003cT\u003e extends React.Component\u003cProps\u003cT\u003e\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tas: PropTypes.any,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `maxDepth` (number)\n\nMaximum depth to convert while handling recursive or deeply nested shapes. Defaults to `3`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { maxDepth: 3 }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tone: {\n\t\ttwo: {\n\t\t\tthree: {\n\t\t\t\tfour: {\n\t\t\t\t\tfive: {\n\t\t\t\t\t\tsuper: 'deep';\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tone: PropTypes.shape({\n\t\t\ttwo: PropTypes.shape({\n\t\t\t\tthree: PropTypes.object,\n\t\t\t}),\n\t\t}),\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `maxSize` (number)\n\nMaximum number of prop types in a component, values in `oneOf` prop types (literal union), and\nproperties in `shape` prop types (interface / type alias). Defaults to `25`. Pass `0` to disable\nmax.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { maxSize: 2 }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\tone: 'foo' | 'bar' | 'baz';\n\ttwo: {\n\t\tfoo: number;\n\t\tbar: string;\n\t\tbaz: boolean;\n\t};\n\tthree: null;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\tone: PropTypes.oneOf(['foo', 'bar']),\n\t\ttwo: PropTypes.shape({\n\t\t\tfoo: PropTypes.number,\n\t\t\tbar: PropTypes.string,\n\t\t}),\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n\n#### `strict` (boolean)\n\nEnables strict prop types by adding `isRequired` to all non-optional properties. Disable this option\nif you want to accept nulls and non-required for all prop types. Defaults to `true`.\n\n```tsx\nmodule.exports = {\n\tplugins: [['babel-plugin-typescript-to-proptypes', { strict: true }]],\n};\n```\n\n```tsx\n// Before\nimport React from 'react';\n\ninterface Props {\n\topt?: string;\n\treq: number;\n}\n\nclass Example extends React.Component\u003cProps\u003e {\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n\n// After\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Example extends React.Component {\n\tstatic propTypes = {\n\t\topt: PropTypes.string,\n\t\treq: PropTyines.number.isRequired,\n\t};\n\n\trender() {\n\t\treturn \u003cdiv /\u003e;\n\t}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilesj%2Fbabel-plugin-typescript-to-proptypes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilesj%2Fbabel-plugin-typescript-to-proptypes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilesj%2Fbabel-plugin-typescript-to-proptypes/lists"}