typo
TypeScript definition file generator for React components
Install
npm i -g @pkgz/typoUsage
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/uiHEADS 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@betaProduction
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.