Skip to content
TypeScript definition generator for React components
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
__snapshots__
fixtures
.gitignore
.nvmrc
.travis.yml
README.md
bin.js
index.js
package-lock.json
package.json
test.js

README.md

Build Status codecov semantic-release

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 "src/**/*.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 "src/**/*.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.

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.

npm i -g @pkgz/typo@beta

Production

Create a new pull-request from beta to master branch. Once it gets merged, the final version will be released using @latest dist tag on npm.

Credits

This module is just a convenience wrapper for react-to-typescript-definitions, thanks to @KnisterPeter for writing this.

You can’t perform that action at this time.