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

(unless we really think something like

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

is OK?)

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

awesome 🌹

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.

Another (odd looking) variation which works:

<
// @ts-ignore
SomeComponent />

Why is this closed? Did we just commit to the ugly solution?

(unless we really think something like

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

is OK?)

Yeah all those linting rules will be so happy about that syntax

Doing this now 😐

    <	// eslint-disable-line react/jsx-tag-spacing
        // @ts-ignore
    Component/>

For anyone struggling with this issue but needing to do it inside of a JSX component, the format for comments is different when working inside of a tag. Specifically, drop the “{” and “}”:

<ComponentWithTroublesomeProp
  okayProp={a}
  anotherOkayProp={b}
  /* @ts-expect-error */
  problematicProp={cGotTroubles}
  yetAnotherOkayProp={d}
/>

Sounds like we’re open to it now: https://github.com/microsoft/TypeScript/issues/37738 PR here: https://github.com/microsoft/TypeScript/pull/38228 🎉

Is there a separate issue to track the possibility of this?

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

No idea if prettier will also complain about excessive spreads, but

    <MyComponent
      {...{}/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */}
      foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

should also work? At some point the prettier-ignore is just the better choice, though. There’s just not many options for comment locations inside jsx.

I ran into even more fun in typescript 3.7 in conjunction with prettier, because prettier keeps the attributes on a separate line, and now @ts-ignore must be positioned immediately before the property, not the start of the tag.

Here’s the workaround I have:

{/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */ /* prettier-ignore */}
    <MyComponent foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

previously:

    {/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */}
    <MyComponent
      foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

Based on the success of #38228 I think this landed in 3.9 🎉

Sadly, there is no other way to get a comment in jsx. It’s gotta be within {}.

reopen please…

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.

Works for .tsx with Typescript 3.6.2

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}`;