typescript-proptypes-generator

A library for generically exporting TypeScript interfaces in TS files and converting them to PropTypes in generated JS files.

Use cases

• Supporting external JS clients or React components that are not written in TypeScript
• Turn type files generated by graphql schemas into Proptypes for React components

Install

npm install typescript-proptypes-generator --save-dev

Usage

import generate from 'typescript-proptypes-generator';

generate({
  tsConfig: './tsconfig.json',
  prettierConfig: '.prettierrc',
  inputPattern: 'path/to/your/files/*.ts'
});

| Option | Description | Required | |----------------|----------------------------------------------------------------------------------------|-----------| | tsConfig | Relative tsConfig file path for processing TS files | true | | prettierConfig | Relative prettierConfig file path for formatting the generated JS files | false | | inputPattern | Pattern or array of patterns of files to parse for interfaces and convert to proptypes | true | | outputDir | Output directory to put generated JS files in, defaults to adjacent to the input file | false |

Example

input TS file:

// ./interface.ts
export interface TestInterface {
  numericField: number;
  booleanField: boolean;
  objectField: {
    numericField: number;
    booleanField: boolean;
  };
}

import generate from 'typescript-proptypes-generator';

generate({
  tsConfig: './tsconfig.json',
  prettierConfig: '.prettierrc',
  inputPattern: './interface.ts'
});

output JS file:

// ./interface.js
export const TestInterface = {
  booleanField: PropTypes.bool.isRequired,
  numericField: PropTypes.number.isRequired,
  objectField: PropTypes.shape({
    booleanField: PropTypes.bool.isRequired,
    numericField: PropTypes.number.isRequired,
  }).isRequired,
};

What about the typescript-to-proptypes library?

This library uses a modified version of the typescript-to-proptypes API for converting TypeScript definitions to PropTypes. The purpose of that library was to expose an API that clients could use to create their own proptype generation scripts. It did not include a script for generating those interfaces itself.

Clients using the library like Material UI have created scripts for generating prop types for certain scenarios. In that case it is used for taking JS files in a folder structure of:

ReactComponentName
  ReactComponentName.js
  ReactComponentName.d.ts

and mutating the JS file to include auto generated prop types from the declaration file.

The use case for this project is to:

1. Bundle in a script to do the generation
2. Not have any coupling to folder structures, declaration files or React components
3. Not mutate input files

Thank yous

• Big thanks to the typescript-to-proptypes library on which this is based.

• Another shout out to Material UI for exposing a script that implements the typescript-to-proptypes API that this project referenced.

License

This project is licensed under the terms of the MIT license.