Migrate a JavaScript Project to TypeScript

Advanced20 minTrending

Convert an existing JavaScript project to TypeScript incrementally by renaming files, adding types, and enabling strict mode over time.

Prerequisites

-Existing JavaScript project
-Node.js 18+
-Passing test suite (recommended)

Steps

Install TypeScript and generate tsconfig

Add TypeScript and create a permissive initial configuration that allows JavaScript files.

$ pnpm add -D typescript @types/node && npx tsc --init

Start with strict: false and allowJs: true to avoid hundreds of errors on day one.

Configure tsconfig for gradual migration

Set allowJs and checkJs to enable mixed JS/TS development.

$ cat > tsconfig.json << 'EOF' { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "allowJs": true, "checkJs": false, "strict": false, "noEmit": true, "esModuleInterop": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true }, "include": ["src"], "exclude": ["node_modules", "dist"] } EOF

Do not enable strict: true at the start. Migrate files first, then enable strict flags incrementally.

Rename files from .js to .ts incrementally

Start with utility files and leaf modules that have no dependents.

$ find src/utils -name '*.js' -exec bash -c 'mv "$0" "${0%.js}.ts"' {} \;

Rename leaf files first (utilities, constants, types) then work inward to core modules and entry points.

Install type definitions for dependencies

Add @types packages for libraries that do not include their own types.

$ pnpm add -D @types/express @types/lodash @types/jest

Run type checking and fix errors

Incrementally fix type errors file by file.

$ npx tsc --noEmit 2>&1 | head -40

Use 'any' as an escape hatch for complex types initially, then refine to proper types in a follow-up pass.

Enable strict flags after all files are converted

Once all .js files are renamed to .ts, enable strict mode incrementally.

$ npx tsc --noEmit --strict 2>&1 | grep -c 'error TS' && echo 'errors remaining'

Full Script

full-script.sh

#!/bin/bash
# JavaScript to TypeScript Migration
set -euo pipefail

echo "=== Installing TypeScript ==="
pnpm add -D typescript @types/node

echo ""
echo "=== Migration Progress ==="
JS_COUNT=$(find src -name '*.js' -o -name '*.jsx' | wc -l)
TS_COUNT=$(find src -name '*.ts' -o -name '*.tsx' | wc -l)
TOTAL=$((JS_COUNT + TS_COUNT))
if [ $TOTAL -gt 0 ]; then
  PCT=$((TS_COUNT * 100 / TOTAL))
else
  PCT=0
fi

echo "JavaScript files: $JS_COUNT"
echo "TypeScript files: $TS_COUNT"
echo "Migration progress: $PCT%"

echo ""
echo "=== Type Errors ==="
ERRORS=$(npx tsc --noEmit 2>&1 | grep -c 'error TS' || true)
echo "Current type errors: $ERRORS"

echo ""
echo "=== Migration Steps ==="
echo "1. Rename leaf files (.js -> .ts) first"
echo "2. Add types to function parameters and return values"
echo "3. Install @types/ packages for untyped dependencies"
echo "4. Replace 'any' with proper types"
echo "5. Enable strict flags one at a time"
echo "6. Enable strict: true when all flags pass"

FAQ

Discussion

Loading comments...

#!/bin/bash # JavaScript to TypeScript Migration set -euo pipefail echo "=== Installing TypeScript ===" pnpm add -D typescript @types/node echo "" echo "=== Migration Progress ===" JS_COUNT=$(find src -name '*.js' -o -name '*.jsx' | wc -l) TS_COUNT=$(find src -name '*.ts' -o -name '*.tsx' | wc -l) TOTAL=$((JS_COUNT + TS_COUNT)) if [ $TOTAL -gt 0 ]; then PCT=$((TS_COUNT * 100 / TOTAL)) else PCT=0 fi echo "JavaScript files: $JS_COUNT" echo "TypeScript files: $TS_COUNT" echo "Migration progress: $PCT%" echo "" echo "=== Type Errors ===" ERRORS=$(npx tsc --noEmit 2>&1 | grep -c 'error TS' || true) echo "Current type errors: $ERRORS" echo "" echo "=== Migration Steps ===" echo "1. Rename leaf files (.js -> .ts) first" echo "2. Add types to function parameters and return values" echo "3. Install @types/ packages for untyped dependencies" echo "4. Replace 'any' with proper types" echo "5. Enable strict flags one at a time" echo "6. Enable strict: true when all flags pass"