How to Ignore errors in TypeScript files

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Ignore errors in TypeScript files #

Use // @ts-ignore to ignore the type checking errors on the next line in a TypeScript file. If you use a linter, you might have to add a comment to also suppress linting errors when using ts-ignore - // eslint-disable-next-line @typescript-eslint/ban-ts-comment.

index.ts
// 👇️ ts-nocheck ignores all ts errors in the file // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-nocheck // 👇️ ts-ignore ignores any ts errors on the next line // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore function sum(a, b) { return a + b; }

We use comments to ignore errors in TypeScript files.

The example shows how to use the @ts-nocheck comment to disable type checking for an entire file.

index.ts
// 👇️ ts-nocheck ignores all ts errors in the file // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-nocheck

You often have to disable type checking for an entire file when your project has type checking for JavaScript files enabled.

The @ts-nocheck comment was added in TypeScript version 3.7. If you're running an older version, you'd have to update, or stick to using @ts-ignore comments to disable type checking for specific lines.

You can ignore type checking errors for a single line by using the // @ts-ignore comment.

index.ts
// 👇️ this ignores any ts errors on the next line // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore function sum(a, b) { return a + b; }

The // @ts-ignore comment ignores any type checking errors that occur on the next line.

If you use a linter, you might get an error when you use a comment to disable type checking for a line, or for the entire file.

There is also a comment @ts-expect-error that suppresses any type errors on the next line. However, if there aren't any errors, TypeScript warns that using @ts-expect-error was unnecessary.

index.ts
// ✅ THIS IS OK // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error console.log('hello' / 0); // ⛔️ Error: Unused '@ts-expect-error' directive.ts(2578) // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error console.log(2 + 2);

The first example has an error, because we can't divide the string hello by 0.

However, the second example doesn't have any errors, so TypeScript alerts us that using @ts-expect-error wasn't necessary.

That's the main difference between ts-ignore and ts-expect-error - // @ts-ignore doesn't alert us if the next line has no errors.

For example, you would use @ts-expect-error if you have a function that takes a parameter of type string, but need to test it with parameters of different types.

index.ts
function logMessage(message: string) { if (typeof message !== 'string') { return 'message has to be a string'; } console.log(message); return message; } // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error const result = logMessage(42); if (result === 'message has to be a string') { console.log('test successful'); }
The logMessage function in the example takes a parameter of type string. However, we want to test if the function does what we expect when invoked with a number.

If we don't add the @ts-expect-error comment, we will get a type checking error, because the function expects a string, and not a number.

This way we can still test our function, and we will get alerted if there is no need for a @ts-expect-error comment.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.