CODEWITHSUNDEEP
javascriptjquerytypescriptsummernote
Amir
Amir

Reputation: 4770

How to disable a ts rule for a specific line?

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"
  ]
}

Upvotes: 300

Views: 495292

Answers (7)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

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

UPDATE: 2025.

Also nice to note, that it's possible to write // @ts-expect-error instead.

Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free. @typescript-eslint/ban-ts-comment

Include a description after the "@ts-expect-error" directive to explain why the @ts-expect-error is necessary. The description must be 3 characters or longer.

For example, it could be // @ts-expect-error needs long time to debug

Upvotes: 55

Maciej Gurban
Maciej Gurban

Reputation: 5739

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
/>

Upvotes: 1

Bullsized
Bullsized

Reputation: 607

In your tsconfig.json just add:

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

and you will be fine.

Upvotes: 0

fortunee
fortunee

Reputation: 4352

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>

Upvotes: 9

y2bd
y2bd

Reputation: 6466

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.

Upvotes: 374

ford04
ford04

Reputation: 74760

@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.

Upvotes: 162

Ahsan Farooq
Ahsan Farooq

Reputation: 967

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

Upvotes: 43

Related Questions