The difference between @ts-ignore and @ts-expect-error (#tilPost)

How do you deal with TypeScript when (for whatever reason) types are mixed up, everything’s full of squigglies, but you’re sure you want to ignore this one particular TypeScript error?

Let’s look at a very simplified example: say you have a method taking in a string and returning a string.

ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

You want to use the method with a number type, though. Of course, TypeScript isn’t happy about how you use greet, but you’re 100% certain you want and need to pass a number.

ts
greet(123);
Argument of type 'number' is not assignable to parameter of type 'string'.2345Argument of type 'number' is not assignable to parameter of type 'string'.

What do you do?

You can bring in your friends @ts-ignore and @ts-expect-error to silence TypeScript.

ts
// @ts-ignore
greet(123);
 
// @ts-expect-error
greet(123);

Both, @ts-ignore and @ts-expect-error, will make TypeScript ignore the type error happening on the following line. But which one should you use?

After doing some reading, generally, it’s recommended to go for @ts-expect-error because it will lead to a TypeScript error when the following line isn’t erroring anymore.

ts
// @ts-ignore
greet('Stefan');
 
// @ts-expect-error
Unused '@ts-expect-error' directive.2578Unused '@ts-expect-error' directive.
greet('Stefan');

The difference between the two comment directives is that @ts-expect-error forces you to clean up later. @ts-expect-error will let you know that you can remove it whenever the issue you faced is resolved. @ts-ignore will stay put and silently sit wherever you placed it.

But whatever you choose, maybe it’s news to you that you can extend these @ts-comments as well. So, when you place @ts- comments in your codebase, do yourself a favor and document why they’re there.

ts
// @ts-ignore: I'm sure this should be a number.
greet(123);
 
// @ts-expect-error: I'm sure this should be a number.
greet(123);

That’s it for today. ✌️