How to (temporarily!) ignore errors during a TypeScript migration
Tags: typescript, react, javascript, webdev
Published: 2020-08-14 15:56:05

**Update:** You might want to skip this approach and use [ts-migrate](https://dev.to/kojikanao/introduce-typescript-to-react-js-project-with-ts-migrate-190h) instead. It can automatically migrate your JS to TS and add @ts-expect-error comments to type errors you need to resolve by hand.

---

Last year at [15Five](https://15five.com) we started migrating our frontend react codebase to TypeScript. I went wild with regexes and Vscode's search/replace all feature, adding types and changing syntax in mass. But regex can only get you so far. There was still thousands of type errors, with each type needing to be reviewed manually. Some were easy to fix, others were much harder. This was going to take a lot of time. Time that I didn't have - my responsibility was DevOps after all, and I was migrating code to TypeScript in my free time. Frontend engineers also worked on the migration but they needed time to ship features.

I could've abandoned the migration and came back to it later. But without validation in our CI, untyped code would sneak in and leave a even bigger problem in the future. Luckily I came across [tsc-silent](https://github.com/evolution-gaming/tsc-silent)! 

{% github evolution-gaming/tsc-silent %}

Tsc-silent lets you ignore certain TypeScript errors. By ignoring the errors that came from code not yet migrated, I could add TypeScript to our CI without error! For the errors that were fixed, tsc-silent would raise an error if they came back again.

This was quite easy to configure:

```shell
yarn tsc-silent --project tsconfig.json --suppress 2339,7006,2345,2739,2532,2307,7031,2741,2554,7053,7005,2740,2538,2531,2551,2571,2533,2305,2322,7015,2305,2722,7034,2724,2349,7016,1208,2749,2604,2363,2362,2605,2555,2464,2525,2559,2362@ff/static/modules 2305@node_modules --stats
```

At this point you might be thinking "Darn, that's a lot of errors you're ignoring! Isn't that bad practice? Is it even worth it if so many errors are ignored"?

A valid concern, but even catching just a few errors is better than catching no errors at all. And this is the dumb approach - our resident code ninja (or "Frontend-related human being" as he humbly calls himself) [Razh](https://github.com/razh) came up with a much smarter solution.

By passing in a configuration file to tsc-silent, we can choose what errors are ignored on which paths!

```shell
yarn tsc-silent --project tsconfig.json --suppressConfig tsc-silent.config.js --stats
```

tsc-silent.config.js
```javascript
module.exports = {
  suppress: [
    {
      pathRegExp: '/ff/static/modules/components',
      codes: [2322, 2339, 2345, 2362, 2363, 2532, 2555, 2739, 2769, 7016],
    },
    {
      pathRegExp: '/ff/static/modules/realtime_feedback',
      codes: [2322, 2345, 2769],
    },
    # other suppressions not shown
  ]
}
```

Now for new folders we have _full_ TypeScript error checking! For old folders we can be more selective about what errors we ignore too. As a bonus the tsc-silent output gives you information on exactly how many errors are left that you need to fix if you use the `--stats` option. In the example below you can see that there are a couple errors with only 1 instance left - those would be easy targets to fix and start validating against.

```
  {
    "codes": {
      "2322": 4,
      "2339": 2,
      "2345": 3,
      "2362": 2,
      "2363": 2,
      "2555": 1,
      "2739": 2,
      "2769": 11,
      "7016": 1
    },
    "pathRegExp": "/\\/ff\\/static\\/modules\\/components/",
    "total": 28
  },
```

In conclusion, if you're migrating a large project to typescript tsc-silent can be quite useful. It lets you validate errors in CI even when your migration is not finished yet. Just don't use it as a excuse to ignore errors forever - there's a reason TypeScript raises an error, and even if it's not a bug it's still good to fix to increase the quality of your code. Someday we will finish up our migration and our need for tsc-silent will be gone. Until then, it's served us well.


<!--

Move slow and don't break things: a sensible tip for Typescript migrations
Better title but not as googleable

With tsc-silent I suppressed the error types that resulted from code that wasn't yet migrated while validating error 


a while. But it was decided that business efforts were better focused on developing features, and I didn't have the time to help out anymore. 

use tsc-silent. Raymond's config. 

https://github.com/15five/fifteen5/pull/23514
https://github.com/15five/fifteen5/pull/24549
 -->