Show HN: Ts-migrating – Progressively Upgrade tsconfig.json

4 months ago 15

🚀 TypeScript keeps evolving — and your tsconfig should too.

But upgrading often breaks existing code, and fixing all errors at once is unrealistic.

@ts-migrating helps your team migrate to a desired tsconfig gradually and safely.

I chose @ts-migrating (rather than @ts-migration) to better reflect the plugin’s progressive and incremental philosophy.

@ts-migrating is a TypeScript plugin that lets you enable your target tsconfig during development (in IDEs or editors that use the TypeScript Language Service) and in CI — without affecting tsc or your production build.

The philosophy behind the plugin follows three simple steps:

  1. 🛑 Prevention

    • Errors from your target config are surfaced during development and in CI.
    • This ensures no new violations are introduced into the codebase.
  2. 🔧 Reduction

    • Lines marked with @ts-migrating are temporarily suppressed.
    • Developers can progressively fix these lines, reducing violations over time.
  3. Migration

    • Once all violations are fixed, no @ts-migrating directives remain.
    • At this point, you're ready to fully adopt the new tsconfig — and the plugin has served its purpose.

@ts-migrating consists of two parts:

  1. 🔌 TypeScript Language Service Plugin

    • Enables IDEs to show errors from the tsconfig you're migrating to.
    • Suppresses errors on lines marked with @ts-migrating.
  2. 🖥️ Standalone CLI: ts-migrating

    • ts-migrating check

      • Run @ts-migrating-aware type checking using your new tsconfig.
    • ts-migrating annotate

      • Automatically mark all errors caused by your new tsconfig with @ts-migrating.
      • ⚠️ Run this with a clean git state!!! This script will automatically add the @ts-migrating directive above every new TypeScript error introduced by your new tsconfig. There are edge cases where this will break the code, please review the changes carefully. It is recommended to run your formatter and linter afterwards.

This project does NOT require any IDE extensions. It relies purely on TypeScript's own Language Service, so it works on most IDEs and editors that support TypeScript (e.g., VSCode, WebStorm).

To install:

cd my-cool-project npm install -D ts-migrating

In your existing tsconfig.json, add the plugin:

ℹ️ Note: plugins only affect the TypeScript Language Service (used by IDEs). They do not impact tsc or your build.

🎉 Your codebase is now ready!

  • Restart the IDE, or just the TS server.
  • Confirm that type errors now reflect the new compilerOptions. For example, when migrating to strict mode, verify that strict-specific errors appear.
  • Add // @ts-migrating before a line with an error — the error should disappear in the IDE.
  • Run:

    You should see errors from the new config, excluding those marked with @ts-migrating.

  • Run npx ts-migrating annotate to automatically annotate newly introduced errors with // @ts-migrating.
  • Replace your CI type-check step with npx ts-migrating check to prevent unreviewed errors from slipping through.

You can use this project programmatically. This can be useful if you would like to have custom integrations, for example: reporting error counts to dashboard etc.

Currently there are only 2 functions exposed, getSemanticDiagnosticsForFile and isPluginDiagnostic. You can import them via ts-migrating/api, e.g.

import { getSemanticDiagnosticsForFile, isPluginDiagnostic } from 'ts-migrating/api'; getSemanticDiagnosticsForFile('path/to/file.ts') // returns all diagnostics using your new tsconfig, including non-plugin ones .filter(isPluginDiagnostic) // removes all non-plugin diagnostics

You could technically also import from ts-migrating/cli and ts-migrating (the ts plugin itself) too.

This project wouldn't be possible without inspiration from:

YCM Jason

Read Entire Article