Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lyft/react-javascript-to-typescript-transform
Convert React JavaScript code to TypeScript with proper typing
https://github.com/lyft/react-javascript-to-typescript-transform
lyft
Last synced: about 2 months ago
JSON representation
Convert React JavaScript code to TypeScript with proper typing
- Host: GitHub
- URL: https://github.com/lyft/react-javascript-to-typescript-transform
- Owner: lyft
- License: apache-2.0
- Archived: true
- Created: 2017-06-21T18:06:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-20T23:52:13.000Z (over 5 years ago)
- Last Synced: 2024-08-02T06:26:10.352Z (5 months ago)
- Topics: lyft
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#overview
- Size: 180 KB
- Stars: 1,571
- Watchers: 32
- Forks: 68
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React JavaScript to TypeScript Transform
[](https://travis-ci.org/lyft/react-javascript-to-typescript-transform)
Transforms React code written in JavaScript to TypeScript.
[**🖥 Download the VSCode Extension**](https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode)
## Features:
* Proxies `PropTypes` to `React.Component` generic type and removes PropTypes
* Provides state typing for `React.Component` based on initial state and `setState()` calls in the component
* Hoist large interfaces for props and state out of `React.Component
` into declared types
* Convert functional components with `PropTypes` property to TypeScript and uses propTypes to generate function type declaration
## Example
**input**
```jsx
class MyComponent extends React.Component {
static propTypes = {
prop1: React.PropTypes.string.isRequired,
prop2: React.PropTypes.number,
};
constructor() {
super();
this.state = { foo: 1, bar: 'str' };
}
render() {
return (
{this.state.foo}, {this.state.bar}, {this.state.baz}
);
}
onClick() {
this.setState({ baz: 3 });
}
}
```
**output**
```tsx
type MyComponentProps = {
prop1: string;
prop2?: number;
};
type MyComponentState = {
foo: number;
bar: string;
baz: number;
};
class MyComponent extends React.Component {
constructor() {
super();
this.state = { foo: 1, bar: 'str' };
}
render() {
return (
{this.state.foo}, {this.state.bar}, {this.state.baz}
);
}
onClick() {
this.setState({ baz: 3 });
}
}
```
## Usage
### CLI
```
npm install -g react-js-to-ts
```
```
react-js-to-ts my-react-js-file.js
```
### VSCode plugin
details
[Download from VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#overview)
## Development
### Tests
Tests are organized in `test` folder. For each transform there is a folder that contains folders for each test case. Each test case has `input.tsx` and `output.tsx`.
```
npm test
```
#### Watch mode
Pass `-w` to `npm test`
```
npm test -- -w
```
#### Only a single test case
Pass `-t` with transform name and case name space separated to `npm test`
```
npm test -- -t "react-js-make-props-and-state-transform propless-stateless"
```