{"id":13528380,"url":"https://github.com/lyft/react-javascript-to-typescript-transform","last_synced_at":"2025-04-01T11:31:28.421Z","repository":{"id":44377785,"uuid":"95032312","full_name":"lyft/react-javascript-to-typescript-transform","owner":"lyft","description":"Convert React JavaScript code to TypeScript with proper typing","archived":true,"fork":false,"pushed_at":"2019-09-20T23:52:13.000Z","size":184,"stargazers_count":1570,"open_issues_count":0,"forks_count":68,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-11-02T13:34:20.647Z","etag":null,"topics":["lyft"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#overview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-21T18:06:17.000Z","updated_at":"2024-10-25T15:41:54.000Z","dependencies_parsed_at":"2022-08-30T13:31:04.858Z","dependency_job_id":null,"html_url":"https://github.com/lyft/react-javascript-to-typescript-transform","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Freact-javascript-to-typescript-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Freact-javascript-to-typescript-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Freact-javascript-to-typescript-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyft%2Freact-javascript-to-typescript-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyft","download_url":"https://codeload.github.com/lyft/react-javascript-to-typescript-transform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246631951,"owners_count":20808789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lyft"],"created_at":"2024-08-01T06:02:29.099Z","updated_at":"2025-04-01T11:31:28.050Z","avatar_url":"https://github.com/lyft.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Built with TypeScript"],"sub_categories":["Web/ReactJS"],"readme":"# React JavaScript to TypeScript Transform\n\n[![Build Status](https://travis-ci.org/lyft/react-javascript-to-typescript-transform.svg?branch=master)](https://travis-ci.org/lyft/react-javascript-to-typescript-transform)\n\nTransforms React code written in JavaScript to TypeScript.\n\n[**🖥 Download the VSCode Extension**](https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode)\n\n## Features:\n\n*   Proxies `PropTypes` to `React.Component` generic type and removes PropTypes\n*   Provides state typing for `React.Component` based on initial state and `setState()` calls in the component\n*   Hoist large interfaces for props and state out of `React.Component\u003cP, S\u003e` into declared types\n*   Convert functional components with `PropTypes` property to TypeScript and uses propTypes to generate function type declaration\n\n## Example\n\n**input**\n\n```jsx\nclass MyComponent extends React.Component {\n    static propTypes = {\n        prop1: React.PropTypes.string.isRequired,\n        prop2: React.PropTypes.number,\n    };\n    constructor() {\n        super();\n        this.state = { foo: 1, bar: 'str' };\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\n                {this.state.foo}, {this.state.bar}, {this.state.baz}\n            \u003c/div\u003e\n        );\n    }\n    onClick() {\n        this.setState({ baz: 3 });\n    }\n}\n```\n\n**output**\n\n```tsx\ntype MyComponentProps = {\n    prop1: string;\n    prop2?: number;\n};\n\ntype MyComponentState = {\n    foo: number;\n    bar: string;\n    baz: number;\n};\n\nclass MyComponent extends React.Component\u003cMyComponentProps, MyComponentState\u003e {\n    constructor() {\n        super();\n        this.state = { foo: 1, bar: 'str' };\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\n                {this.state.foo}, {this.state.bar}, {this.state.baz}\n            \u003c/div\u003e\n        );\n    }\n    onClick() {\n        this.setState({ baz: 3 });\n    }\n}\n```\n\n## Usage\n\n### CLI\n\n```\nnpm install -g react-js-to-ts\n```\n\n```\nreact-js-to-ts my-react-js-file.js\n```\n\n### VSCode plugin\n\ndetails\n[Download from VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#overview)\n\n## Development\n\n### Tests\n\nTests 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`.\n\n```\nnpm test\n```\n\n#### Watch mode\n\nPass `-w` to `npm test`\n\n```\nnpm test -- -w\n```\n\n#### Only a single test case\n\nPass `-t` with transform name and case name space separated to `npm test`\n\n```\nnpm test -- -t \"react-js-make-props-and-state-transform propless-stateless\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyft%2Freact-javascript-to-typescript-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyft%2Freact-javascript-to-typescript-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyft%2Freact-javascript-to-typescript-transform/lists"}