Typescript: La corrección de código "Ignorar este mensaje de error" en JSX da como resultado la representación de `// @ ts-ignore`

Tenga en cuenta: a menos que agreguemos nuevos formularios de supresión (es decir, en línea), la única solución para esto es deshabilitar la corrección rápida cuando no se puede producir una posición de supresión válida.

(a menos que realmente pensemos en algo como

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

está bien?)

Sería increíble agregar nuevos formularios de supresión e incluso soporte para detectar errores específicos. Pero, en ausencia de eso, usaremos ese formulario de comentario extraño ya que necesitamos la capacidad de ignorar los errores en las construcciones JSX. No es bonito, pero es lo único que funciona. Por lo tanto, la solución podría (1) incluirlo en este formulario o (2) no incluirlo en absoluto (para que no termine renderizándose). Me gusta (1) a pesar de que no es bonito porque es funcionalmente correcto; parecería incorrecto si la regla pudiera ignorar todo excepto los errores en el cuerpo de un componente JSX. Además, existe un precedente de comentarios extraños ignorados en cadenas de plantillas. Por ejemplo,

const s = `
Hello ${doesnotexist}`;

se corrige-ignorado como

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

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

impresionante 🌹

¿Hay otro patrón que otros estén usando?

Esta es una sintaxis realmente extraña

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

Editar lo anterior en realidad no funciona.

¿Cómo ignoran las personas los errores mecanografiados dentro de los archivos TSX hoy? He investigado mucho y no puedo encontrar una única solución que funcione. No poder ignorar alguna declaración es un gran desafío.

Otra variación (de aspecto extraño) que funciona:

<
// @ts-ignore
SomeComponent />

(a menos que realmente pensemos en algo como

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

está bien?)

que inteligente eres !!!

Editar lo anterior en realidad no funciona.

¿Cómo ignoran las personas los errores mecanografiados dentro de los archivos TSX hoy? He investigado mucho y no puedo encontrar una única solución que funcione. No poder ignorar alguna declaración es un gran desafío.

Funciona por .tsx con Typescript 3.6.2

(a menos que realmente pensemos en algo como

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

está bien?)

Sí, todas esas reglas de pelusa estarán tan felices con esa sintaxis

Haciendo esto ahora: neutral_face:

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

Me encontré aún más divertido en el mecanografiado 3.7 junto con más bonito, porque más bonito mantiene los atributos en una línea separada, y ahora @ ts-ignore debe colocarse inmediatamente antes de la propiedad, no al comienzo de la etiqueta.

Aquí está la solución que tengo:

{/* 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',
      }}
    />

previamente:

    {/* 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',
      }}
    />

No tengo idea si las más bonitas también se quejarán de los diferenciales excesivos, pero

    <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',
      }}
    />

también debería funcionar? Sin embargo, en algún momento, lo más bonito-ignorar es la mejor opción. Simplemente no hay muchas opciones para ubicaciones de comentarios dentro de jsx.

¿Por qué está cerrado? ¿Acabamos de comprometernos con la fea solución?

reabrir por favor ...

¿Acabamos de comprometernos con la fea solución?

Sí. La corrección rápida ahora hace lo feo. La "belleza" no es una preocupación cuando se trata de supresiones que, por supuesto, deberían ser eventos excepcionales. Estamos bastante bloqueados por lo que permite la sintaxis jsx, por lo que realmente es lo que es.

Definitivamente nos comprometimos con la solución fea ... pero tal vez no.

¿Podemos votar / acordar mantener esto abierto? Me encantaría abordar esto en un tiempo libre, pero no quiero perder el tiempo si la solución actual es la opción preferida.

Convenido. Actualmente estoy usando la solución fugly porque una biblioteca de terceros en la que confío tiene mecanografía incorrecta en su último código. La solución fea funciona por ahora, pero sería bueno tener una sola línea si es posible.

Lamentablemente, no hay otra forma de obtener un comentario en jsx. Debe estar dentro de {} .

¿Existe un problema separado para rastrear la posibilidad de esto?

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

Parece que ahora estamos abiertos: https://github.com/microsoft/TypeScript/issues/37738
PR aquí: https://github.com/microsoft/TypeScript/pull/38228 🎉

Yo personalmente pienso

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

es la mejor y más universal solución para esto.

Las herramientas de formato automático (más bonitas, etc.) pueden estropearse debajo de los trucos.

Nota:
Esta solución está funcionando bien

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

mientras esto

<
// @ts-ignore
SomeComponent />

tiene formato automático y deja de ser válido (al menos en mi configuración más bonita)

Basado en el éxito de # 38228, creo que esto aterrizó en 3.9: tada:

Supongo que esto es más un problema de JSX, pero mira esto:

Digamos que tengo esto :

import * as React from 'react';

declare var SomeComponentFromLibrary: React.FC<{
    children?: React.ReactElement
}>;

declare var MyComponent: React.FC<{
    foo: string,
}>;

export default () => (
    <SomeComponentFromLibrary>
        {/* @ts-expect-error */}
        <MyComponent />
    </SomeComponentFromLibrary>
)

SomeComponentFromLibrary No puedo cambiar y deseo suprimir el error que genera <MyComponent /> .

Sin embargo, agregar otro elemento a los hijos de SomeComponentFromLibrary ahora rompe la restricción de tipo children?: React.ReactElement , produciendo otro error de tipo.

¿Es posible crear comentarios en JSX que no se transformen en código?