How to fix TypeScript version mismatch in TypeScript

First, identify which versions are installed and being used:

# Check local project version
npx tsc --version

# Check global version (if installed)
tsc --version

# Check VS Code's TypeScript version
# Look at bottom-right status bar in a .ts file
# Or open Command Palette (Cmd/Ctrl+Shift+P) and search "TypeScript: Select TypeScript Version"

Also check your package.json to see what version is specified:

{
  "devDependencies": {
    "typescript": "^5.4.5"  // Current version spec
  }
}

Check your framework documentation for TypeScript compatibility:

Angular: Check the official compatibility table at https://angular.io/guide/versions or look at the error message, which shows the required range.

NestJS: Typically supports latest TypeScript but check package.json of @nestjs/core for peerDependencies.

Next.js: Generally stays up-to-date with latest TypeScript versions.

React: No strict TypeScript version requirements, but @types/react may have compatibility constraints.

If you see an error like "requires TypeScript >=4.9.3 and <5.2.0", your installed version must fall within that range.

Update your package.json to specify a compatible version, then reinstall:

{
  "devDependencies": {
    "typescript": "~5.1.6"  // Use ~ for patch updates only, or exact version
  }
}

Then reinstall dependencies:

# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

Version prefix meanings:
- ~5.1.6 - Allow patch updates (5.1.x)
- ^5.1.6 - Allow minor updates (5.x.x)
- 5.1.6 - Exact version only (safest for framework compatibility)

If VS Code shows different errors than your build, force it to use your project's TypeScript:

Option 1: Workspace Settings (Recommended)

Create or edit .vscode/settings.json:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Option 2: Command Palette

1. Open any .ts file
2. Click TypeScript version in bottom-right status bar
3. Select "Use Workspace Version"

Verify it worked:
The status bar should now show the version from your node_modules instead of "(bundled)".

Global TypeScript installations can interfere with project-specific versions:

# Check if globally installed
npm list -g typescript

# Remove global TypeScript
npm uninstall -g typescript

# Verify removal
which tsc  # Should show nothing or error

After removal, always use npx tsc instead of tsc to ensure you're using the local project version.

If you need global TypeScript for quick experimentation, use npx instead:

npx -p typescript tsc --version

To prevent unexpected version changes from dependency updates:

{
  "devDependencies": {
    "typescript": "5.1.6"  // No ^ or ~ prefix
  },
  "resolutions": {  // For Yarn
    "typescript": "5.1.6"
  },
  "overrides": {  // For npm 8.3+
    "typescript": "5.1.6"
  },
  "pnpm": {  // For pnpm
    "overrides": {
      "typescript": "5.1.6"
    }
  }
}

This forces all dependencies to use the exact same TypeScript version, preventing transitive dependency conflicts.