Skip to content

codemod tool to helps developers migrate JavaScript code to TypeScript by automatically updating syntax, adding type annotations, and updating imports.

Notifications You must be signed in to change notification settings

hamidyfine/ts-codemod

Repository files navigation

npm version

What is Codemod?

codemod is a tool for helping migrate code. It uses jscodeshift internally to transform the source code.

Introduction

This repository contains a codemod tool designed to help developers migrate JavaScript codebases to TypeScript. TypeScript is a popular programming language that adds optional static type checking to JavaScript, making it easier to catch errors and write more maintainable code. However, migrating an existing JavaScript codebase to TypeScript can be a time-consuming and error-prone task. This codemod tool automates much of the process by automatically updating JavaScript code to TypeScript syntax wherever possible, including adding type annotations and updating imports. By using this tool, developers can quickly and easily migrate their codebase to TypeScript, saving time and reducing the likelihood of errors.

Installation

codemod requires Node.js v14+ to run.

To install globally:

npm i -g codemod

Just run the below command to get started.

codemod

How to use

Read about how to use the command here.

List of codemods available

  • Change extension

    • It simply modifies the extension of the file.
  • Convert proptypes to TS

    • It converts React propTypes to Typescript type.
    • The things it does are:
      • Remove prop-types import from the import section.
      • Collects the component name and the list of properties and their type in propTypes.
      • Generates a TS type based on component name and collected list of properties and their type.
      • Inserts the generated type as a type annotation to the props param of the component. It also supports destructured props, props in React.memo and React.forwardRef.
      • Removes the propTypes.
      • It also supports multiple components in the same file.
    • React propTypes to TS type:
      • Converts all the primitive types such as boolean, string, number to respective TS type.
      • For PropTypes.func, it will insert an empty anonymous arrow fn type () => void.
      • For PropTypes.object or PropTypes.array, it maps unknown as respective TS type.
      • It also supports PropTypes.oneOfTypes which will map it to TS union types.
    • Sample conversion: image

Local development

Want to contribute? Great!

Open your Terminal and run the below command.

To install dependencies:

npm install

To build:

npm run build

Please check jscodeshift docs before writing a codemod.

Forked from Deriv-CodeMod

About

codemod tool to helps developers migrate JavaScript code to TypeScript by automatically updating syntax, adding type annotations, and updating imports.

Topics

Resources

Stars

Watchers

Forks