typescript-type-transformer

A Babel plugin to generate React PropTypes from TypeScript interfaces or type aliases.

Does not support converting external type references (as Babel has no type information) without the typeCheck option being enabled.

Will add folder named .cache to the root of project

Examples

Supports class components that define generic props.

1// Before
2import React from 'react';
3
4interface Props {
5  name?: string;
6}
7
8class Example extends React.Component<Props> {
9  render() {
10    return <div />;
11  }
12}
13
14// After
15import React from 'react';
16import PropTypes from 'prop-types';
17
18class Example extends React.Component {
19  static propTypes = {
20    name: PropTypes.string,
21  };
22
23  render() {
24    return <div />;
25  }
26}

Function components that annotate the props argument. Also supports anonymous functions without explicit types (below).

1// Before
2import React from 'react';
3
4interface Props {
5  name: string;
6}
7
8function Example(props: Props) {
9  return <div />;
10}
11
12// After
13import React from 'react';
14import PropTypes from 'prop-types';
15
16function Example(props) {
17  return <div />;
18}
19
20Example.propTypes = {
21  name: PropTypes.string.isRequired,
22};

And anonymous functions that are annotated as a React.SFC, React.FC, React.StatelessComponent, or React.FunctionComponent.

1// Before
2import React from 'react';
3
4type Props = {
5  name?: string;
6};
7
8const Example: React.FC<Props> = (props) => <div />;
9
10// After
11import React from 'react';
12import PropTypes from 'prop-types';
13
14const Example = (props) => <div />;
15
16Example.propTypes = {
17  name: PropTypes.string,
18};

Requirements

• Babel 7+
• TypeScript 3+

Installation

1yarn add --dev typescript-type-transformer
2// Or
3npm install --save-dev typescript-type-transformer

Usage

Add the plugin to your Babel config. It's preferred to enable this plugin for development only, or when building a library. Requires either the @babel/plugin-syntax-jsx plugin or the @babel/preset-react preset.

1// babel.config.js
2const plugins = [
3  [
4    'typescript-type-transformer',
5     isProduction: process.env.NODE_ENV === 'production',
6  ]
7];
8
9module.exports = {
10  // Required
11  presets: [
12    [
13      '@babel/preset-typescript',
14      {
15        onlyRemoveTypeImports: true,
16      },
17    ],
18     '@babel/preset-react'
19  ]
20  plugins,
21};

When transpiling down to ES5 or lower, the @babel/plugin-proposal-class-properties plugin is required.

Options

isProduction

This option required to determinate when to generate objects.

Options required and must have value of true or false

comments (boolean)

Copy comments from original source file for docgen purposes. Requires the comments option to also be enabled in your Babel config. Defaults to false.

1module.exports = {
2  plugins: [['typescript-type-transformer', { comments: true }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  /** This name controls the fate of the whole universe */
6  name?: string;
7}
8
9class Example extends React.Component<Props> {
10  render() {
11    return <div />;
12  }
13}
14
15// After
16import React from 'react';
17import PropTypes from 'prop-types';
18
19class Example extends React.Component {
20  static propTypes = {
21    /** This name controls the fate of the whole universe */
22    name: PropTypes.string,
23  };
24
25  render() {
26    return <div />;
27  }
28}

customPropTypeSuffixes (string[])

Reference custom types directly when they match one of the provided suffixes. This option requires the type to be within the file itself, as imported types would be automatically removed by Babel. Defaults to [].

1module.exports = {
2  plugins: [['typescript-type-transformer', { customPropTypeSuffixes: ['Shape'] }]],
3};

1// Before
2import React from 'react';
3import { NameShape } from './shapes';
4
5interface Props {
6  name?: NameShape;
7}
8
9class Example extends React.Component<Props> {
10  render() {
11    return <div />;
12  }
13}
14
15// After
16import React from 'react';
17import { NameShape } from './shapes';
18
19class Example extends React.Component {
20  static propTypes = {
21    name: NameShape,
22  };
23
24  render() {
25    return <div />;
26  }
27}

forbidExtraProps (boolean)

Automatically wrap all propTypes expressions with airbnb-prop-types forbidExtraProps, which will error for any unknown and unspecified prop. Defaults to false.

1module.exports = {
2  plugins: [['typescript-type-transformer', { forbidExtraProps: true }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  name?: string;
6}
7
8class Example extends React.Component<Props> {
9  render() {
10    return <div />;
11  }
12}
13
14// After
15import React from 'react';
16import PropTypes from 'prop-types';
17import { forbidExtraProps } from 'airbnb-prop-types';
18
19class Example extends React.Component {
20  static propTypes = forbidExtraProps({
21    name: PropTypes.string,
22  });
23
24  render() {
25    return <div />;
26  }
27}

implicitChildren (bool)

Automatically include a children prop type to mimic the implicit nature of TypeScript and React.ReactNode. Defaults to false.

1module.exports = {
2  plugins: [['typescript-type-transformer', { implicitChildren: true }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  foo: string;
6}
7
8class Example extends React.Component<Props> {
9  render() {
10    return <div />;
11  }
12}
13
14// After
15import React from 'react';
16import PropTypes from 'prop-types';
17
18class Example extends React.Component {
19  static propTypes = {
20    foo: PropTypes.string.isRequired,
21    children: PropTypes.node,
22  };
23
24  render() {
25    return <div />;
26  }
27}

maxDepth (number)

Maximum depth to convert while handling recursive or deeply nested shapes. Defaults to 3.

1module.exports = {
2  plugins: [['typescript-type-transformer', { maxDepth: 3 }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  one: {
6    two: {
7      three: {
8        four: {
9          five: {
10            super: 'deep';
11          };
12        };
13      };
14    };
15  };
16}
17
18class Example extends React.Component<Props> {
19  render() {
20    return <div />;
21  }
22}
23
24// After
25import React from 'react';
26import PropTypes from 'prop-types';
27
28class Example extends React.Component {
29  static propTypes = {
30    one: PropTypes.shape({
31      two: PropTypes.shape({
32        three: PropTypes.object,
33      }),
34    }),
35  };
36
37  render() {
38    return <div />;
39  }
40}

maxSize (number)

Maximum number of prop types in a component, values in oneOf prop types (literal union), and properties in shape prop types (interface / type alias). Defaults to 25. Pass 0 to disable max.

1module.exports = {
2  plugins: [['typescript-type-transformer', { maxSize: 2 }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  one: 'foo' | 'bar' | 'baz';
6  two: {
7    foo: number;
8    bar: string;
9    baz: boolean;
10  };
11  three: null;
12}
13
14class Example extends React.Component<Props> {
15  render() {
16    return <div />;
17  }
18}
19
20// After
21import React from 'react';
22import PropTypes from 'prop-types';
23
24class Example extends React.Component {
25  static propTypes = {
26    one: PropTypes.oneOf(['foo', 'bar']),
27    two: PropTypes.shape({
28      foo: PropTypes.number,
29      bar: PropTypes.string,
30    }),
31  };
32
33  render() {
34    return <div />;
35  }
36}

strict (boolean)

Enables strict prop types by adding isRequired to all non-optional properties. Disable this option if you want to accept nulls and non-required for all prop types. Defaults to true.

1module.exports = {
2  plugins: [['typescript-type-transformer', { strict: true }]],
3};

1// Before
2import React from 'react';
3
4interface Props {
5  opt?: string;
6  req: number;
7}
8
9class Example extends React.Component<Props> {
10  render() {
11    return <div />;
12  }
13}
14
15// After
16import React from 'react';
17import PropTypes from 'prop-types';
18
19class Example extends React.Component {
20  static propTypes = {
21    opt: PropTypes.string,
22    req: PropTyines.number.isRequired,
23  };
24
25  render() {
26    return <div />;
27  }
28}

typeCheck (boolean|string)

NOT FINISHED Resolve full type information for aliases and references using TypeScript's built-in type checker. When enabled with true, will glob for files using ./src/**/*.ts. Glob can be customized by passing a string. Defaults to false.

Note: This process is heavy and may increase compilation times.

1module.exports = {
2  plugins: [['typescript-type-transformer', { typeCheck: true }]],
3};

1// Before
2import React from 'react';
3import { Location } from './types';
4
5interface Props {
6  location?: Location;
7}
8
9class Example extends React.Component<Props> {
10  render() {
11    return <div />;
12  }
13}
14
15// After
16import React from 'react';
17import PropTypes from 'prop-types';
18
19class Example extends React.Component {
20  static propTypes = {
21    location: PropTypes.shape({
22      lat: PropTypes.number,
23      long: PropTypes.number,
24    }),
25  };
26
27  render() {
28    return <div />;
29  }
30}

Type Schema

Following functions are available to convert types to schema.

• transformComponentPropsToSchema
• transformTypeToSchema
• transformTypeToPropTypes
• transformTypeToKeys

Function Options

• excludeProps?: string[];
• excludeRootProps: ?: string[];
• includeProps?: string[];
• maxDepth?: number;
• disableTransformInEnv?: string[];

transformComponentPropsToSchema

Usage:

import { transformComponentPropsToSchema } from 'typescript-type-transformer';

export interface ComponentProps {
  prop_a: string;
  prop_b?: boolean;
}

const FunctionComponent = (props: ComponentProps) => {
  return null;
};

transformComponentPropsToSchema(FunctionComponent);

Result:

FunctionComponent.__propSchema = {
  'type': 'object',
  'properties': {
    'prop_a': {
      'type': 'string'
    },
    'prop_b': {
      'type': 'boolean'
    }
  },
  'required': ['prop_a'],
  'additionalProperties': false
};"

transformTypeToSchema

Usage:

import { transformTypeToSchema } from 'typescript-type-transformer';

export interface TestProps {
  prop_a: string;
  prop_b?: string;
}

const type = transformTypeToSchema<TestProps>();

Result

const type = {
  'type': 'object',
  'properties': {
    'prop_a': {
      'type': 'string'
    },
    'prop_b': {
      'type': 'string'
    }
  },
  'required': ['prop_a'],
  'additionalProperties': false
};

transformTypeToPropTypes

Usage:

import { transformTypeToPropTypes } from 'typescript-type-transformer';

export interface ComponentProps {
  prop_a: string;
  prop_b?: boolean;
}

const FunctionComponent = (props: ComponentProps) => {
  return null;
};
transformTypeToPropTypes(FunctionComponent);

Result:

FunctionComponent.propTypes = {
  prop_a: _pt.string.isRequired,
  prop_b: _pt.bool
};"

transformTypeToKeys

Usage:

import { transformTypeToKeys } from 'typescript-type-transformer';

export interface TestProps {
  prop_a: string;
  prop_b?: string;
}

const type = transformTypeToKeys<TestProps>();

Result:

const type = ['prop_a', 'prop_b'];"

Global options

• generateReactPropTypesManually?: boolean;
• disableGenerateReactPropTypesInEnv?: string[];
• disableGenerateReactPropSchemaInEnv?: string[];
• disableGenerateTypeSchemaInEnv?: string[];
• disableGenerateTypeKeysInEnv?: string[];