{"library":"react-to-typescript-definitions","title":"React to TypeScript Definitions Generator","description":"react-to-typescript-definitions is a development tool that generates TypeScript declaration files (`.d.ts`) directly from React component source code. It analyzes React components, their PropTypes (including `any`, `array`, `bool`, `func`, `number`, `object`, `string`, `node`, `element`, `oneOfType`, `arrayOf`, `symbol`, `shape`), and JSDoc comments to infer their type definitions. The library supports both ES6/ES7 class components and can handle modern JavaScript features like optional chaining. It offers both a command-line interface (CLI) for direct file processing and an API for programmatic use, allowing integration into build pipelines. The current stable version is 3.1.1, released in April 2021, and its development appears to be in a maintenance phase. It provides a crucial bridge for projects transitioning from JavaScript with PropTypes to TypeScript, automatically creating type information for existing component libraries, though its reliance on PropTypes ties it to an older React pattern.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-to-typescript-definitions"],"cli":{"name":"react2typescript","version":null}},"imports":["import { generateFromSource } from 'react-to-typescript-definitions';","import { generateFromFile } from 'react-to-typescript-definitions';","import { generateFromAst } from 'react-to-typescript-definitions';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { generateFromSource } from 'react-to-typescript-definitions';\n\nconst reactComponentCode = `\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n * A simple Button component.\n * @param {string} text - The button text.\n * @param {boolean} [disabled=false] - Whether the button is disabled.\n * @param {function} onClick - Function to call on click.\n * @param {('primary'|'secondary')} [type='primary'] - The button type.\n */\nclass Button extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    onClick: PropTypes.func.isRequired,\n    type: PropTypes.oneOf(['primary', 'secondary']),\n  };\n\n  static defaultProps = {\n    disabled: false,\n    type: 'primary',\n  };\n\n  render() {\n    const { text, disabled, onClick, type } = this.props;\n    return (\n      <button onClick={onClick} disabled={disabled} className={type}>\n        {text}\n      </button>\n    );\n  }\n}\n\nexport default Button;\n`;\n\nconst dtsContent = generateFromSource('Button', reactComponentCode, {});\n\nconsole.log(dtsContent);\n\n/* Expected console output (simplified):\ndeclare module 'Button' {\n    interface ButtonProps {\n        text: string;\n        disabled?: boolean;\n        onClick: Function;\n        type?: 'primary' | 'secondary';\n    }\n    class Button extends React.Component<ButtonProps, any> {\n    }\n    export default Button;\n}*/","lang":"typescript","description":"Demonstrates how to use the `generateFromSource` API to create TypeScript definitions from a React component string with PropTypes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}