Typescript: Correção do código "Ignorar esta mensagem de erro" nos resultados JSX na renderização de `// @ ts-ignore`

Observação: a menos que adicionemos novos formulários de supressão (ou seja, em linha), a única correção para isso é desativar a correção rápida quando uma posição de supressão válida não pode ser produzida.

(a menos que realmente pensemos em algo como

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

está bem?)

Seria incrível adicionar novos formulários de supressão e até mesmo suporte para direcionar erros específicos. Mas, na ausência disso, estaremos usando aquele formulário de comentário esquisito, pois precisamos da capacidade de ignorar erros em construções JSX. Não é bonito, mas é a única coisa que funciona. Portanto, a correção pode (1) incluí-lo neste formulário ou (2) não incluí-lo de forma alguma (portanto, ele não termina sendo renderizado). Eu gosto de (1), embora não seja bonito porque é funcionalmente correto - pareceria estranho se a regra pudesse ignorar tudo, exceto erros no corpo de um componente JSX. Além disso, há algum precedente para comentários de ignorar de aparência estranha em strings de modelo. Por exemplo,

const s = `
Hello ${doesnotexist}`;

é corrigido - ignorado como

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

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

incrível 🌹

Existe outro padrão que outras pessoas estão usando?

Esta é uma sintaxe realmente muito estranha

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

Editar o acima não funciona.

Como as pessoas estão ignorando erros de datilografia em TSX arquivos hoje? Eu fiz uma tonelada de pesquisas e não consigo encontrar uma única solução que funcione. Não ser capaz de ignorar alguma afirmação é um grande desafio.

Outra variação (de aparência estranha) que funciona:

<
// @ts-ignore
SomeComponent />

(a menos que realmente pensemos em algo como

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

está bem?)

quão inteligente você é !!!

Editar o acima não funciona.

Como as pessoas estão ignorando erros de datilografia em TSX arquivos hoje? Eu fiz uma tonelada de pesquisas e não consigo encontrar uma única solução que funcione. Não ser capaz de ignorar alguma afirmação é um grande desafio.

Funciona para .tsx com Typescript 3.6.2

(a menos que realmente pensemos em algo como

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

está bem?)

Sim, todas essas regras de linting ficarão tão felizes com essa sintaxe

Fazendo isso agora: neutral_face:

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

Eu me deparei com ainda mais diversão no typescript 3.7 em conjunto com o mais bonito, porque o mais bonito mantém os atributos em uma linha separada e agora @ ts-ignore deve ser posicionado imediatamente antes da propriedade, não no início da tag.

Esta é a solução alternativa que tenho:

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

anteriormente:

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

Não faço ideia se mais bonita também vai reclamar de spreads excessivos, mas

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

também deve funcionar? Em algum ponto, ignorar mais bonito é apenas a melhor escolha, no entanto. Simplesmente não há muitas opções para locais de comentários dentro do jsx.

Por que está fechado? Nós apenas nos comprometemos com a solução feia?

reabra por favor ...

Nós apenas nos comprometemos com a solução feia?

Sim. A correção rápida agora faz a coisa mais feia. a "beleza" não é uma preocupação quando se trata de supressões que, por direito, deveriam ser eventos excepcionais. Estamos bastante bloqueados pelo que a sintaxe jsx permite, então é realmente o que é.

Definitivamente nos comprometemos com a solução horrível ... mas talvez não.

Podemos votar / concordar em manter isso aberto? Eu adoraria resolver isso em algum tempo livre, mas não quero perder tempo se a solução atual for a opção preferida.

Acordado. No momento, estou usando a solução feia porque uma biblioteca de terceiros da qual confio tem digitações incorretas em seu código mais recente. A solução Fugly funciona por enquanto, mas seria bom ter uma linha, se possível.

Infelizmente, não há outra maneira de obter um comentário no jsx. Deve estar dentro de {} .

Existe um problema separado para rastrear a possibilidade disso?

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

Parece que agora estamos abertos para isso: https://github.com/microsoft/TypeScript/issues/37738
RP aqui: https://github.com/microsoft/TypeScript/pull/38228 🎉

Eu pessoalmente acho

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

é a melhor e mais universal solução para isso.

Ferramentas de formatação automática (mais bonitas, etc.) podem estragar os hacks abaixo.

Nota:
Esta solução está funcionando bem

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

enquanto isso

<
// @ts-ignore
SomeComponent />

é formatado automaticamente e se torna inválido (pelo menos nas minhas configurações mais bonitas)

Com base no sucesso de # 38228, acho que caiu em 3.9: tada:

Acho que isso é mais um problema de JSX, mas verifique isto:

Digamos que eu tenha isso :

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 Não posso mudar e desejo suprimir o erro que <MyComponent /> gera.

No entanto, adicionar outro elemento aos filhos de SomeComponentFromLibrary agora quebra a restrição de tipo children?: React.ReactElement , gerando outro erro de tipo.

É possível criar comentários em JSX que não sejam transformados em código?