Stop 07 · TypeScriptProjects · 1/1

Convert JS projects into TypeScript

In short

Reading about TypeScript only goes so far. Converting a project you already built is where it really clicks, and it's a great line on your resume.

The single best way to actually learn TypeScript — migrating a real JavaScript project file by file, fixing type errors as they surface.

The jaadu mascot in a hard hat paints one renovated room while the other rooms still look old.

Think of it like this

Renovating a house room by room

You don't knock the whole house down to add wiring. You do one room, live in it, then do the next. Migrating to TypeScript works the same: one file at a time, with the app working after every step.

Watch it happen

Migration plan

Set up

Leaf file

Data types

Repeat

Go strict

1/5Install typescript, add tsconfig.json with allowJs, and commit. The app still runs as before.

The big ideas

What you need to know

Go file by file

allowJs lets .js and .ts files live together, so you can convert slowly and keep shipping.

Start from the leaves

Convert small utility files first, then the files that import them. Types flow upward.

Model your data

Write types for API responses and main objects early. They pay off everywhere.

Turn on strict

Aim for "strict": true. If it's too many errors at once, fix them file by file.

See it in code

Walk through the code

json

1{2  "compilerOptions": {3    "target": "ES2022",4    "module": "ESNext",5    "moduleResolution": "bundler",6    "allowJs": true,7    "checkJs": false,8    "strict": true,9    "noEmit": true,10    "skipLibCheck": true,11    "jsx": "react-jsx"12  },13  "include": ["src"]14}

1/4Modern JavaScript output, ES modules, and file lookup that matches bundlers like Vite.

noEmit means tsc only checks types, and your bundler (like Vite) builds the code. Remove the jsx line if the project doesn't use React.

Save yourself the pain

Common mistakes

Oops

Renaming every file to .ts on day one and facing 500 errors.

Do this instead

Convert a few files at a time, commit, and keep the app running between steps.

Oops

Silencing errors with any and @ts-ignore just to get it green.

Do this instead

Use them only as a last resort with a TODO comment. Each one is a bug TypeScript can't catch.

Oops

Converting and adding new features in the same commits.

Do this instead

Keep migration commits separate, so if something breaks, you know which kind of change caused it.

Your mission

First milestone: one typed module

~45 min

Quick check

Why turn on allowJs while migrating a project?

Go deeper

1Pick one of your earlier vanilla JS projects to migrate first.
2Rename files to `.ts`/`.tsx` incrementally rather than all at once.
3Start with `strict: false` if needed, then tighten `tsconfig.json` over time.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download