@pkgz/typo NPM

typo

TypeScript definition file generator for React components

Install

npm i -g @pkgz/typo

Usage

Your React components must be using PropTypes in order for this to work.

Example

❯ typo type -h

  Description
    Look for React components and generate type definitions

  Usage
    $ typo type <glob> [options]

  Options
    -m, --mod     Change definition module name
    -g, --git     Avoid files ignored by .gitignore  (default true)
    -h, --help    Displays this message

  Examples
    $ typo "**/*.jsx"
    $ typo "src/**/*component.js" -m @pkgz/ui
    $ typo "**/!(index|*spec)*.jsx" -m @pkgz/ui

HEADS UP: Depending which shell you use (I use fish) you'll have to escape the glob patterns accordingly

Output

❯ typo type fixtures/**/*.jsx -m @pkgz/ui
declare module '@pkgz/ui' {
    import * as React from 'react';

    export interface PanelProps {
        test?: boolean;
    }

    export class Panel extends React.Component<PanelProps, any> {
        render(): JSX.Element;

    }

}

Piping to a definition file

❯ typo fixtures/**/*.jsx -m @pkgz/ui > index.d.ts
❯ cat index.d.ts
declare module '@pkgz/ui' {
    import * as React from 'react';

    export interface PanelProps {
        test?: boolean;
    }

    export class Panel extends React.Component<PanelProps, any> {
        render(): JSX.Element;

    }

}

Known issues

Currently generates complete module per file instead of one global module

Contributing

Feel free to open an issue, pull requests are preferred.

IMPORTANT Make sure you always create new branches from beta.

Automated versioning

We use semantic-release to automate the versioning process, make sure you follow the commit message convention explained here.

HEADS UP: If you are not sure how write a commit message, make your changes in your feature branch and run npm run commit and follow the assistant.

Releases

Beta

Create a feature branch and make a pull-request to beta branch. Once its merged, you can try and install the package using @beta dist tag on npm.