"Ignore this error message" code fix in JSX results in rendering `// @ts-ignore`

[brieb]

TypeScript Version: 3.2.0-dev.20181004

Search Terms:

disableJsDiagnostics
JSX
Code fix
Ignore this error message
Add '@ts-ignore' to all error messages

Code

// MyComponent.jsx
// @ts-check
import React from "react";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // @ts-ignore
        {doesNotExist}
      </div>
    );
  }
}

export default MyComponent;

Running the Ignore this error message or Add '@ts-ignore' to all error messages code fix inserts a // @ts-ignore which satisfies the compiler.

But,

<div>
  // @ts-ignore
  {doesNotExist}
</div>

will actually render // @ts-ignore.

Expected behavior:

Looks like {/* @ts-ignore */} or {/* // @ts-ignore */} are not recognized as valid ignore comments.

So, the best I could come up with is

<div>
  {/* 
  // @ts-ignore */}
  {doesNotExist}
</div>

Actual behavior:

// MyComponent.jsx
// @ts-check
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // @ts-ignore
        {doesNotExist}
      </div>
    );
  }
}

export default MyComponent;

where // @ts-ignore mistakenly gets rendered.

Related Issues:

#25240

[weswigham]

Please note: Unless we add new suppression forms (ie, inline), the only fix for this is disabling the quickfix when a valid suppression position cannot be produced.

[weswigham]

(unless we really think something like

{/* 
  // @ts-ignore */}

is OK?)

[brieb]

Would be awesome to add new suppression forms, and even support for targeting specific errors. But, in the absence of that, we will be using that weirdo comment form since we need the ability to ignore errors in JSX constructs. It's not pretty, but it's the only thing that works. So, the fix could either (1) include it in this form or (2) not include it at all (so it doesn't end up rendering). I like (1) even though its not pretty because it's functionally correct - it would seem off if the rule could ignore everything except errors in the body of a JSX component. Moreover there is some precedent for odd-looking ignore comments in template strings. For example,

const s = `
Hello ${doesnotexist}`;

gets fix-ignored as

const s = `
Hello ${
// @ts-ignore
doesnotexist}`;

[proYang]

{/* 
  // @ts-ignore */}

awesome 🌹

[oshalygin]

Is there another pattern that others are using?

This is really really odd syntax

{/* 
  // @ts-ignore */}

Edit the above doesn't actually work.

How are people ignoring typescript errors inside of TSX files today? I've done a ton of research and can't find a single solution that works. Not being able to ignore some statement is a huge challenge.

[crickford]

Another (odd looking) variation which works:

<
// @ts-ignore
SomeComponent />

[manooog]

(unless we really think something like

{/* 
  // @ts-ignore */}

is OK?)

how smart you are!!!