How to Convert JavaScript to TypeScript

A practical step-by-step guide to migrating any JavaScript project to TypeScript — including React apps, Node.js backends, and libraries.

TypeScript is a superset of JavaScript, so migration is gradual — you don't need to convert everything at once. This guide walks through each step in order, from setup to full strict mode.

Install TypeScript

Add TypeScript as a dev dependency:

npm install --save-dev typescript
# or
yarn add -D typescript

Generate a tsconfig.json:

npx tsc --init

Configure tsconfig.json for Gradual Migration

Start permissive — allow JavaScript files and don't enforce strictness yet:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowJs": true,          // allow .js files alongside .ts
    "checkJs": false,         // don't type-check .js files yet
    "strict": false,          // enable after migration is complete
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Rename Files One at a Time

Rename .js → .ts and .jsx → .tsx. Start with files that have the fewest dependencies:

# Rename utility files first (no JSX)
mv src/utils/formatDate.js src/utils/formatDate.ts
mv src/utils/api.js src/utils/api.ts

# Then React components
mv src/components/Button.jsx src/components/Button.tsx
mv src/components/Header.jsx src/components/Header.tsx

# Pages last (depend on everything else)
mv src/pages/Home.jsx src/pages/Home.tsx

Add Types to Functions and Variables

Fix TypeScript errors by annotating function parameters and return types:

Before (JavaScript)

function formatDate(date) {
  return date.toLocaleDateString();
}

function fetchUser(id) {
  return fetch('/api/users/' + id)
    .then(r => r.json());
}

After (TypeScript)

function formatDate(date: Date): string {
  return date.toLocaleDateString();
}

async function fetchUser(id: number): Promise<User> {
  const res = await fetch('/api/users/' + id);
  return res.json() as User;
}

Type React Component Props

Define interfaces for component props and state:

Before (JSX)

function UserCard({ name, email, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

After (TSX)

interface UserCardProps {
  name: string;
  email: string;
  avatar: string;
}

function UserCard({ name, email, avatar }: UserCardProps) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

Install Type Definitions for Libraries

Many npm packages need separate @types packages for TypeScript:

npm install --save-dev @types/node
npm install --save-dev @types/react @types/react-dom
npm install --save-dev @types/lodash

# Check if a package has types:
# 1. Built-in: look for "types" in package.json
# 2. DefinitelyTyped: npm install @types/<package-name>
# 3. TypeScript-first packages include types (axios, zod, etc.)

Enable Strict Mode

Once all files are converted, turn on strict mode to catch null/undefined bugs:

{
  "compilerOptions": {
    "strict": true,
    // strict enables all of:
    // strictNullChecks — catches null/undefined errors
    // noImplicitAny — no untyped variables
    // strictFunctionTypes
    // strictPropertyInitialization
    // useUnknownInCatchVariables
  }
}

Expect new errors. Fix them by adding null checks and non-null assertions where appropriate.

Automate with an AI Tool

For large files, use an AI converter to add types automatically instead of writing them by hand:

Tip: Use js2ts.com to convert JavaScript files automatically

Paste any JavaScript function, class, or component and get the TypeScript equivalent with types added instantly. Review and adjust the output.

Frequently Asked Questions

How long does it take to convert a JavaScript project to TypeScript?

A small project (under 10 files) can be converted in a few hours. Medium projects take days to a week. Large codebases are converted incrementally over weeks — rename files one at a time and fix errors as you go. AI tools speed up individual files significantly.

Do I need to rewrite my code to add TypeScript?

No. TypeScript is a superset of JavaScript, so all existing JavaScript code is valid TypeScript. You only need to add type annotations where the compiler reports errors. Start with allowJs: true and strict: false to ease the transition.

What is allowJs in tsconfig.json?

allowJs lets you mix .js and .ts files in the same project. This enables gradual migration — convert files one at a time without touching the whole codebase at once.

Should I enable strict mode from the start of migration?

For new projects, yes. For migrations, start with strict: false and enable it after all files are converted. Strict mode catches more bugs but requires more type annotations to satisfy.

Can I use an AI tool to convert JavaScript to TypeScript automatically?

Yes. Tools like js2ts.com use AI to add TypeScript types to JavaScript code automatically. Paste a function, class, or component and get the typed version back instantly. Review and adjust the output for your domain.

From the blog

View all →

Convert JavaScript to TypeScript automatically with AI

Use the JS to TS Converter →