@drymers/ts-to-proptypes NPM

npm version license

ts-to-proptypes

Generate React PropTypes declarations automatically from TypeScript interfaces and types.

Introduction

ts-to-proptypes is a developer tool that bridges the gap between TypeScript's static type system and React's runtime PropTypes validation. It analyzes your TypeScript React components and generates corresponding PropTypes definitions, enhancing your components with runtime type checking without the manual effort of maintaining duplicate type definitions.

This tool is particularly useful for projects that:

Use TypeScript for static type checking
Need runtime validation through PropTypes
Want to maintain consistency between TypeScript types and PropTypes
Generate documentation from PropTypes (such as with Storybook)

Installation

Install the package as a development dependency:

# Using npm (public npm)
npm install @drymers/ts-to-proptypes --save-dev

# Using yarn
yarn add @drymers/ts-to-proptypes --save-dev


# Using pnpm
pnpm add -D @drymers/ts-to-proptypes --save-dev

Installing from GitHub Packages

(ensure your project .npmrc has @drymers:registry=https://npm.pkg.github.com)

npm install @drymers/ts-to-proptypes --save-dev

Features

ts-to-proptypes provides several key features to enhance your React development workflow:

Automatic PropTypes Generation: Convert TypeScript interfaces and types to PropTypes declarations
Function Component Support: Works with both standard and arrow function components
Default Export Detection: Properly handles default exports by identifying the actual component name
Required Props Identification: Preserves optional/required status from TypeScript definitions
Type Mapping: Intelligently maps TypeScript types to appropriate PropTypes validators
Inline or Separate Files: Generate PropTypes in the same file or in separate files
Prettier Integration: Format the generated code according to your project's Prettier configuration

Usage

Quick CLI

Run once with npx:

npx ts-to-proptypes \
  -s "src/components/**/*.tsx" \
  -o "src/proptypes"

Common flags

-s, --source <glob> Glob pattern for input files (default: src/**/*.tsx)
-o, --outDir <dir> Where to write generated files (default: current working dir)
--inline Append propTypes definitions directly into each source file
--prettier Run Prettier on the generated output

Via npm Script

Add this to your package.json:

"scripts": {
  "generate-proptypes": "ts-to-proptypes -s \"src/components/**/*.tsx\" -o \"src/proptypes\""
}

Now simply run:

npm run generate-proptypes

You can combine flags as needed:

npm run generate-proptypes -- --inline --prettier

Example

Given src/Button.tsx:

import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean;
};

export function Button({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Running:

npx ts-to-proptypes -s "src/Button.tsx" -o "src/proptypes"

Produces src/proptypes/Button.propTypes.ts:

import PropTypes from 'prop-types';

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
};

And with inline mode:

npx ts-to-proptypes -s "src/Button.tsx" --inline

The original src/Button.tsx is updated to include the propTypes block directly below your component.

Command Line Options

Option	Alias	Description	Default
`--source`	`-s`	Glob pattern for source files	`src/*/.tsx`
`--outDir`	`-o`	Directory to place generated files	Current directory
`--inline`	-	Append PropTypes into the original file	`false`
`--prettier`	-	Format generated files using Prettier	`false`

How It Works

ts-to-proptypes operates in several stages:

Component Detection: Parses the TypeScript AST to identify React components in your codebase
Props Extraction: Extracts props interface or type definitions from the components
Type Analysis: Analyzes TypeScript types and maps them to PropTypes equivalents
Code Generation: Generates PropTypes declarations with proper typing and requirement flags
Output: Writes the PropTypes either to separate files or inline with the components

The tool uses the powerful ts-morph library to analyze TypeScript code and maintain type accuracy.

Type Mapping

TypeScript types are mapped to PropTypes as follows:

TypeScript Type	PropTypes Equivalent
`string`	`PropTypes.string`
`number`	`PropTypes.number`
`boolean`	`PropTypes.bool`
`any`	`PropTypes.any`
`Array<T>` or `T[]`	`PropTypes.array`
`Function` or `() => void`	`PropTypes.func`
`object` or `{}`	`PropTypes.object`

Optional props (marked with ?) don't include the .isRequired validator.

Supported TypeScript Types

TypeScript Type	PropTypes Output	Notes
`string`	`PropTypes.string`
`number`	`PropTypes.number`
`boolean`	`PropTypes.bool`
`any`	`PropTypes.any`
`unknown`	`PropTypes.any`
`object`	`PropTypes.object`	Generic object type
`Record<K, V>`	`PropTypes.object`
`Array<T>`	`PropTypes.array`
`T[]`	`PropTypes.array`
`Function`	`PropTypes.func`
`() => void`	`PropTypes.func`	Any function signature
`'a' \\| 'b' \\| 'c'`	`PropTypes.oneOf(['a', 'b', 'c'])`	String literal unions
`1 \\| 2 \\| 3`	`PropTypes.oneOf([1, 2, 3])`	Number literal unions
`string \\| number`	`PropTypes.oneOfType([PropTypes.string, PropTypes.number])`	Type unions
`string \\| undefined`	`PropTypes.string`	Optional types
`string?`	`PropTypes.string`	Optional properties