Registry / serialization / react-to-typescript-definitions

react-to-typescript-definitions

library3.1.1jsnpmunverified

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.

serialization

npm install react-to-typescript-definitions

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TO-TYPESCRIP

react-to-typescript-definitions

serializationjavascriptv3.1.1

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.

generateFromSource

✓ import { generateFromSource } from 'react-to-typescript-definitions';

✗ const { generateFromSource } = require('react-to-typescript-definitions');

The library primarily uses named exports. While CommonJS `require` might work in some environments, ESM `import` is the idiomatic way for modern Node.js and bundlers.

generateFromFile

✓ import { generateFromFile } from 'react-to-typescript-definitions';

✗ import generateFromFile from 'react-to-typescript-definitions';

All public API functions are named exports, not default exports.

generateFromAst

✓ import { generateFromAst } from 'react-to-typescript-definitions';

✗ import * as rtfd from 'react-to-typescript-definitions'; rtfd.generateFromAst(...);

While `import * as` works, directly importing named functions is generally preferred for clarity.

Demonstrates how to use the `generateFromSource` API to create TypeScript definitions from a React component string with PropTypes.

import { generateFromSource } from 'react-to-typescript-definitions'; const reactComponentCode = ` import React from 'react'; import PropTypes from 'prop-types'; /** * A simple Button component. * @param {string} text - The button text. * @param {boolean} [disabled=false] - Whether the button is disabled. * @param {function} onClick - Function to call on click. * @param {('primary'|'secondary')} [type='primary'] - The button type. */ class Button extends React.Component { static propTypes = { text: PropTypes.string.isRequired, disabled: PropTypes.bool, onClick: PropTypes.func.isRequired, type: PropTypes.oneOf(['primary', 'secondary']), }; static defaultProps = { disabled: false, type: 'primary', }; render() { const { text, disabled, onClick, type } = this.props; return ( <button onClick={onClick} disabled={disabled} className={type}> {text} </button> ); } } export default Button; `; const dtsContent = generateFromSource('Button', reactComponentCode, {}); console.log(dtsContent); /* Expected console output (simplified): declare module 'Button' { interface ButtonProps { text: string; disabled?: boolean; onClick: Function; type?: 'primary' | 'secondary'; } class Button extends React.Component<ButtonProps, any> { } export default Button; }*/

react2typescript --version

Debug

Known issues

breakingVersion 3.0.0 dropped support for Node.js 8. Users running older Node.js versions will encounter errors.

fix

Upgrade your Node.js environment to version 10 or higher. The current stable Node.js LTS is recommended.

affects: >=3.0.0

gotchaThe CLI tool `react2dts` expects component source code via standard input (stdin), not as a file path argument.

fix

Pipe the file content to the CLI, for example: `cat myComponent.jsx | react2dts --module-name MyComponent`.

affects: >=1.0.0

gotchaGenerating types for `instanceOf` PropTypes requires providing a custom `instanceOfResolver` function in the options.

fix

Pass an `instanceOfResolver` function in the options object to `generateFromFile`, `generateFromSource`, or `generateFromAst` that resolves type names to their file paths.

affects: >=1.0.0

deprecatedThis library relies on React PropTypes for type inference, which is a legacy pattern. Modern React applications typically use TypeScript directly or JSDoc for type checking.

fix

Consider migrating your React components directly to TypeScript for better developer experience and type safety, reducing the need for an intermediate PropTypes-to-TypeScript step.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Node.js v8 is no longer supported

Attempting to run `react-to-typescript-definitions` version 3.0.0 or higher with Node.js version 8 or below.

fix

Upgrade your Node.js environment. Install Node.js v10 or a newer LTS version.

ENOENT: no such file or directory, open '<filename>'

Attempting to pass a file path directly as an argument to the `react2dts` CLI instead of piping its content through stdin.

fix

Use a command like `cat yourComponent.jsx | react2dts` to pipe the file content to the CLI. The CLI doesn't accept file paths as direct arguments.

TypeError: (0, react_to_typescript_definitions_1.generateFromSource) is not a function

Incorrectly using CommonJS `require` syntax or trying to destructure a default import when the package primarily uses named exports.

fix

Ensure you are using named imports with ESM syntax: `import { generateFromSource } from 'react-to-typescript-definitions';`

Upgrade

Version history

3.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/KnisterPeter/react-to-typescript-definitions ↗

packagehttps://www.npmjs.com/package/react-to-typescript-definitions ↗