React/Prop Types Typescript

Last update

Jul 24, 2024

Codemod to convert React PropTypes to TypeScript types.

Supports function and class components
Supports static propTypes declarations on class components
Supports forwardRefs
Supports files with multiple components
Copies JSDoc comments to the generated TypeScript types
Option to remove or preserve PropTypes after converting to TS

Before:

import PropTypes from 'prop-types';
import React from 'react';

export function MyComponent(props) {
	return <span />;
}

MyComponent.propTypes = {
	bar: PropTypes.string.isRequired,
	foo: PropTypes.number,
};

After:

import React from 'react';

interface MyComponentProps {
	bar: string;
	foo?: number;
}

export function MyComponent(props: MyComponentProps) {
	return <span />;
}

Codemod to convert React PropTypes to TypeScript types.

Supports function and class components
Supports static propTypes declarations on class components
Supports forwardRefs
Supports files with multiple components
Copies JSDoc comments to the generated TypeScript types
Option to remove or preserve PropTypes after converting to TS

Before:

import PropTypes from 'prop-types';
import React from 'react';

export function MyComponent(props) {
	return <span />;
}

MyComponent.propTypes = {
	bar: PropTypes.string.isRequired,
	foo: PropTypes.number,
};

After:

import React from 'react';

interface MyComponentProps {
	bar: string;
	foo?: number;
}

export function MyComponent(props: MyComponentProps) {
	return <span />;
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now