React JavaScript to TypeScript Transform
Transforms React code written in JavaScript to TypeScript.
Features:
- Proxies
PropTypes
toReact.Component
generic type and removes PropTypes - Provides state typing for
React.Component
based on initial state andsetState()
calls in the component - Hoist large interfaces for props and state out of
React.Component<P, S>
into declared types - Convert functional components with
PropTypes
property to TypeScript and uses propTypes to generate function type declaration
Example
input
Component static propTypes = prop1: ReactPropTypesstringisRequired prop2: ReactPropTypesnumber ; { ; thisstate = foo: 1 bar: 'str' ; } { return <div> thisstatefoo thisstatebar thisstatebaz </div> ; } { this; }
output
; ;
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
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"