{"id":13533887,"url":"https://github.com/mskelton/ratchet","last_synced_at":"2025-08-20T03:31:15.249Z","repository":{"id":43072587,"uuid":"265410678","full_name":"mskelton/ratchet","owner":"mskelton","description":"Codemod to convert React PropTypes to TypeScript types.","archived":false,"fork":false,"pushed_at":"2024-04-07T19:56:22.000Z","size":8105,"stargazers_count":135,"open_issues_count":5,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-18T08:18:03.269Z","etag":null,"topics":["codemod","convert-react-proptypes","prop-types","proptypes","react","typescript"],"latest_commit_sha":null,"homepage":"https://mskelton.dev/ratchet","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mskelton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"mskelton"}},"created_at":"2020-05-20T01:10:15.000Z","updated_at":"2024-09-26T14:23:00.000Z","dependencies_parsed_at":"2023-12-30T19:31:55.902Z","dependency_job_id":"883458a7-65eb-41b0-aed0-085f6c96b738","html_url":"https://github.com/mskelton/ratchet","commit_stats":{"total_commits":171,"total_committers":9,"mean_commits":19.0,"dds":"0.22807017543859653","last_synced_commit":"b3c23e5e7b9216999285ba74e33a02086bbb2615"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Fratchet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Fratchet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Fratchet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mskelton%2Fratchet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mskelton","download_url":"https://codeload.github.com/mskelton/ratchet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217755,"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":["codemod","convert-react-proptypes","prop-types","proptypes","react","typescript"],"created_at":"2024-08-01T07:01:24.027Z","updated_at":"2024-12-19T06:09:28.511Z","avatar_url":"https://github.com/mskelton.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mskelton"],"categories":["TypeScript","Misc"],"sub_categories":["ant-design"],"readme":"# Ratchet\n\n[![Test](https://github.com/mskelton/ratchet/workflows/Test/badge.svg?branch=main)](https://github.com/mskelton/ratchet/actions?query=workflow%3ATest)\n[![GitHub deployments](https://img.shields.io/github/deployments/mskelton/ratchet/production?label=Deploy)](https://ratchet.mskelton.dev)\n\nCodemod to convert React PropTypes to TypeScript types.\n\n## Key Features\n\n- Supports function and class components\n- Supports `static propTypes` declarations on class components\n- Supports [`forwardRef`s](https://reactjs.org/docs/forwarding-refs.html)\n- Supports files with multiple components\n- Copies JSDoc comments to the generated TypeScript types\n- Option to remove or preserve PropTypes after converting to TS\n\n## Usage\n\nThanks to my friends at Codemod, you can easily run Ratchet on your project\nusing the [Codemod VS Code extension](https://marketplace.visualstudio.com/items?itemName=codemod.codemod-vscode-extension):\n\n\u003ca href=\"https://go.codemod.com/ratchet\" target=\"_blank\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/codemod-com/codemod/main/apps/docs/images/misc/run-in-codemod-badge.svg\" alt=\"Run in Codemod.com\" width=\"200\"/\u003e\n\u003c/a\u003e\n\n\u003e To learn more about using the Codemod platform, [read the docs here](https://go.codemod.com/vsce-docs).\n\u003e If you encounter any issues, please [reach out](https://www.codemod.com/community) to my good friends at Codemod.\n\nOr run the following command with a file glob that matches the files you want to\nconvert.\n\n```bash\nnpx jscodeshift -t https://go.mskelton.dev/ratchet.ts GLOB\n\n# Example\nnpx jscodeshift -t https://go.mskelton.dev/ratchet.ts src/**/*.{js,jsx}\n```\n\n## Try it Online!\n\nAdditionally, you can use Ratchet online at\n[ratchet.mskelton.dev](https://ratchet.mskelton.dev)! Simply paste your input on\nthe left and instantly see the output on the right!\n\n[![Screenshot](web/screenshot.png?v=1)](https://ratchet.mskelton.dev)\n\n## Example: Function Component\n\nInput:\n\n```javascript\n// Input\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\nexport function MyComponent(props) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  bar: PropTypes.string.isRequired,\n  foo: PropTypes.number,\n}\n```\n\nOutput:\n\n```tsx\nimport React from \"react\"\n\ninterface MyComponentProps {\n  bar: string\n  foo?: number\n}\n\nexport function MyComponent(props: MyComponentProps) {\n  return \u003cspan /\u003e\n}\n```\n\n## Options\n\n### `--preserve-prop-types`\n\nPreserves prop types after converting to TS. There are two available modes:\n`all` and `unconverted`.\n\n#### `--preserve-prop-types=all`\n\n_CLI alias: `--preserve-prop-types`_\n\nThis option will preserve all PropTypes. This is useful for component libraries\nwhere you support both TypeScript declarations and PropTypes.\n\nInput:\n\n```jsx\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\nexport function MyComponent(props) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  foo: PropTypes.number,\n}\n```\n\nOutput:\n\n```tsx\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\ninterface MyComponentProps {\n  foo?: number\n}\n\nexport function MyComponent(props: MyComponentProps) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  foo: PropTypes.number,\n}\n```\n\n#### `--preserve-prop-types=unconverted`\n\nThis option will preserve prop types which could not be fully converted. For\nexample, spread expressions are not converted, and custom validators are\nconverted to `unknown`. This option is useful to preserve these expressions so\nyou can manually review and convert to their TypeScript equivalent.\n\nInput:\n\n```jsx\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\nexport function MyComponent(props) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  ...OtherComponent.propTypes,\n  foo: PropTypes.number,\n  bar(props, propName, componentName) {\n    return new Error(\"Invalid prop\")\n  },\n}\n```\n\nOutput:\n\n```tsx\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\ninterface MyComponentProps {\n  foo?: number\n  bar: unknown\n}\n\nexport function MyComponent(props: MyComponentProps) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  ...OtherComponent.propTypes,\n  bar(props, propName, componentName) {\n    return new Error(\"Invalid prop\")\n  },\n}\n```\n\n## `--declaration-style`\n\nAllow to choose between interfaces \u0026 type aliases. Default is `interface`.\n\n### `--declaration-style=type`\n\nCreate type alias instead of interface.\n\nInput:\n\n```javascript\n// Input\nimport PropTypes from \"prop-types\"\nimport React from \"react\"\n\nexport function MyComponent(props) {\n  return \u003cspan /\u003e\n}\n\nMyComponent.propTypes = {\n  bar: PropTypes.string.isRequired,\n  foo: PropTypes.number,\n}\n```\n\nOutput:\n\n```tsx\nimport React from \"react\"\n\ntype MyComponentProps = {\n  bar: string\n  foo?: number\n}\n\nexport function MyComponent(props: MyComponentProps) {\n  return \u003cspan /\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmskelton%2Fratchet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmskelton%2Fratchet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmskelton%2Fratchet/lists"}