How to disable a ts rule for a specific line?

Question

Summernote is a jQuery plugin, and I don't need type definitions for it. I just want to modify the object, but TS keeps throwing errors. The line bellow still gives me: "Property 'summernote' does not exist on type 'jQueryStatic'." error.

(function ($) {

  /* tslint:disable */
  delete $.summernote.options.keyMap.pc.TAB;
  delete $.summernote.options.keyMap.mac.TAB;
  /* tslint:enable */

})(jQuery)

Edit:

Here is my tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "noUnusedParameters": true
  },
  "include": [
      "js/**/*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

Jackpot

Answer 1

As of Typescript 2.6, you can now bypass a compiler error/warning for a specific line:

if (false) {
    // @ts-ignore: Unreachable code error
    console.log("hello");
}

Note that the official docs "recommend you use [this] very sparingly". It is almost always preferable to cast to any instead as that better expresses intent.

---

Older answer:

You can use /* tslint:disable-next-line */ to locally disable tslint. However, as this is a compiler error disabling tslint might not help.

You can always temporarily cast $ to any:

delete ($ as any).summernote.options.keyMap.pc.TAB

which will allow you to access whatever properties you want.

Try

Accepted answer doesn't answer the generic question. Disable a rule. – Unhealthy

There is an active issue regarding @ts-ignore for a specific error. – Try

and how to disable line inside jsx? – Camarena

@Camarena Here's a GH issue with the solution to that: github.com/Microsoft/TypeScript/issues/27552 – Try

@ts-ignore isn't a recommended solution, instead use the suggested @ts-expect-error – Gnat

Answer 2

@ts-expect-error

TypeScript 3.9 introduces a new magic comment. @ts-expect-error will:

• have same functionality as @ts-ignore
• trigger an error, if actually no compiler error has been suppressed (= indicates useless flag)

if (false) {
  // @ts-expect-error: Let's ignore a compile error like this unreachable code 
  console.log("hello"); // compiles
}

// If @ts-expect-error didn't suppress anything at all, we now get a nice warning 
let flag = true;
// ...
if (flag) {
  // @ts-expect-error
  // ^~~~~~~~~~~~~~~^ error: "Unused '@ts-expect-error' directive.(2578)"
  console.log("hello"); 
}

Playground

---

What do TypeScript developers recommend?

@ts-ignore and @ts-expect-error are like a sledgehammer for compile errors. TypeScript developers recommend more fine-grained, narrow-scoped typesystem solutions for most cases:

We added ts-ignore with the intent that it be used for the remaining 5% that can't be suppressed by any existing type system mechanics [...] there should be very very very few ts-ignores in your codebase[.] - microsoft/TypeScript#19139

[...] fundamentally, we believe you shouldn't be using suppressions in TypeScript at all. If it's a type issue, you can cast out of it (that's why any, casting, and shorthand module declarations exist). If it's a syntax issue, everything is awful and we'll be broken anyway, so suppressions won't do anything (suppressions do not affect parse errors). - microsoft/TypeScript#19573

---

Alternatives for question-case

▶ Use any type

// type assertion for single expression
delete ($ as any).summernote.options.keyMap.pc.TAB;

// new variable assignment for multiple usages
const $$: any = $
delete $$.summernote.options.keyMap.pc.TAB;
delete $$.summernote.options.keyMap.mac.TAB;

▶ Augment JQueryStatic interface

// ./global.d.ts
interface JQueryStatic {
  summernote: any;
}

// ./main.ts
delete $.summernote.options.keyMap.pc.TAB; // works

In other cases, shorthand declarations / augmentations are handy utilities to compile modules with no / extendable types. A viable strategy is also to incrementally migrate to TypeScript, keeping not yet migrated code in .js via allowJs and checkJs: false compiler flags.

Slackjawed

Answer 3

You can simple use the following just before the line: // @ts-ignore

Mcmullan

sometimes you may want to disable eslint // eslint-disable-next-line @typescript-eslint/ban-ts-comment – Para

Answer 4

I used // @ts-ignore:next-line right before the error. As for reference visit the documentation.

Undoubted

Answer 5

If you're using eslint to perform your check or fix you can disable a line by adding this on top of the line

// eslint-disable-next-line @typescript-eslint/<RELEVANT_ESLINT_RULE>

Quinquennium

Answer 6

An interesting caveat I've encountered was when needing to disable TS for a particular line of JSX, where typically comments are meant to be enclosed within curly braces, e.g. `{/* @ts-expect-error */}. Here's a problematic case:

// Cannot place it here either
<MyComponent
  {/* @ts-expect-error */} // <== This will produce Unused '@ts-expect-error' directive.
  someProps={withTsIssue}
  // other props continue below, so we cannot make it a one line
  // especially with particular eslint/prettier configurations
/>

The way to fix it is to do:

<MyComponent
  // @ts-expect-error
  someProps={withTsIssue}
  // other props continue below, so we cannot make it a one line
  // especially with particular eslint/prettier configurations
/>

Heterotrophic

Answer 7

In your tsconfig.json just add:

{
  "downlevelIteration": true,
  "strictNullChecks": false,
}

and you will be fine.

Eberhardt