make @ts-ignore available when using {/* @ts-ignore */}.

[sottar]

Search Terms

@ts-ignore annotation

Suggestion

Hi, I apologize if it is already discussed. However, I believe we need this feature for @ts-ignore.
Currently @ts-ignore only mutes the errors only using with // @ts-ignore.
I believe we also need to make @ts-ignore available when using {/* @ts-ignore */}.

I've already founded this issue. It's a similar issue but not the same and I think this is easier to implement.

I think this feature only need to change this code.
https://github.com/Microsoft/TypeScript/blob/master/src/compiler/program.ts#L2

Use Cases

I'd like to use this in the html structures in the TSX file.

Examples

This is implementation for amp-script. We have to use onclick instead of onClick and it's not supported for now.

const App = () => {
  return (
    <div>
      ...
      {/* @ts-ignore */}
      <button onclick={() => setCount(count + 1)}>Click me</button> // this line should be ignored
      ...
    </div>
  );
}

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[yanlee26]

waiting feedback asap.

[Mathijs003]

use this for now :

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

[tahv0]

use this for now :

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

Parsing error: '...' expected

[maw]

I wasn't able to get the workarounds shown in this and other issues (#27552, #37738) to work.

I started with code that looks a bit like this

const Foo = () => {
    const thing = mightReturnNull();

    return (
        <div>
            <SomeComponent someProp={thing}></SomeComponent> 👈 tsc tells me off here
        </div>
    );
};

and turned it into this

const Foo = () => {
    const thing = mightReturnNull();

    // @ts-ignore
    const workaround: NonNullable<string> = thing;

    return (
        <div>
            <SomeComponent someProp={workaround}></SomeComponent>
        </div>
    );
};

I think this is reasonably clean and that the general idea likely applies more broadly.

(And, no, in the real, non-simplified code in question I'm not being quite so cavalier shuffling nulls around 😆 )

[yishengjiang99]

one of those did the trick...

[cmdcolin]

I may be misunderstanding some simpler approach but I had trouble ts-ignore'ing a single prop on a tag, so I made the tag single lined with a prettier-ignore and then added a ts-ignore to that

Example

{/* prettier-ignore */
/* @ts-ignore  */}
<DataGrid propThatGivesTsError super={long} list={of} other={props} that={would} otherwise={take} multiple={lines} />

[zhouzi]

Here's how I was able to work around this issue:

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