Typescript: Le correctif de code "Ignorer ce message d'erreur" dans JSX entraîne le rendu `// @ ts-ignore`

Créé le 4 oct. 2018 · 22Commentaires · Source: microsoft/TypeScript

Version TypeScript: 3.2.0-dev.20181004

Termes de recherche:

disableJsDiagnostics
JSX
Correction de code
Ignorez ce message d'erreur
Ajoutez «@ ts-ignore» à tous les messages d'erreur

Code

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

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

export default MyComponent;

L'exécution du correctif de code Ignore this error message ou Add '@ts-ignore' to all error messages insère un // @ts-ignore qui satisfait le compilateur.

Mais,

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

rendra réellement // @ts-ignore .

Comportement prévisible:

On dirait que {/* @ts-ignore */} ou {/* // @ts-ignore */} ne sont pas reconnus comme des commentaires ignorés valides.

Donc, le mieux que je puisse trouver est

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

Comportement réel:

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

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

export default MyComponent;

où // @ts-ignore est rendu par erreur.

Problèmes liés:

https://github.com/Microsoft/TypeScript/issues/25240

Bug JSTSX Quick Fixes

Source

brieb

👍27

Commentaire le plus utile

(sauf si nous pensons vraiment quelque chose comme

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

ça va?)

weswigham le 8 oct. 2018

👍133 🎉21 👀18 😕9 😄7 ❤2

Tous les 22 commentaires

Remarque: à moins que nous ajoutions de nouveaux formulaires de suppression (c'est-à-dire en ligne), le seul correctif pour cela est de désactiver le correctif rapide lorsqu'une position de suppression valide ne peut être produite.

weswigham le 8 oct. 2018

(sauf si nous pensons vraiment quelque chose comme

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

ça va?)

weswigham le 8 oct. 2018

👍133 🎉21 👀18 😕9 😄7 ❤2

Ce serait génial d'ajouter de nouveaux formulaires de suppression et même de prendre en charge le ciblage d'erreurs spécifiques. Mais, en l'absence de cela, nous utiliserons cette forme de commentaire bizarre car nous avons besoin de la capacité d'ignorer les erreurs dans les constructions JSX. Ce n'est pas joli, mais c'est la seule chose qui fonctionne. Ainsi, le correctif peut soit (1) l'inclure sous cette forme ou (2) ne pas l'inclure du tout (donc il ne finit pas par être rendu). J'aime (1) même si ce n'est pas joli car il est fonctionnellement correct - il semblerait que la règle puisse tout ignorer sauf les erreurs dans le corps d'un composant JSX. De plus, il existe un précédent pour les commentaires ignorés d'apparence étrange dans les chaînes de modèle. Par exemple,

const s = `
Hello ${doesnotexist}`;

est ignoré par le correctif car

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

brieb le 8 oct. 2018

👍2

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

génial 🌹

proYang le 25 mai 2019

👍29

Y a-t-il un autre modèle que d'autres utilisent?

C'est une syntaxe vraiment vraiment étrange

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

Modifier ce qui précède ne fonctionne pas réellement.

Comment les gens ignorent-ils les erreurs dactylographiées dans les fichiers TSX aujourd'hui? J'ai fait une tonne de recherches et je ne peux pas trouver une seule solution qui fonctionne. Ne pas pouvoir ignorer une déclaration est un défi de taille.

oshalygin le 25 juin 2019

👍18 🚀1 ❤1 🎉1

Une autre variante (étrange) qui fonctionne:

<
// @ts-ignore
SomeComponent />

crickford le 3 juil. 2019

👍14 👀3

(sauf si nous pensons vraiment quelque chose comme
{/* 
  // @ts-ignore */}
ça va?)

comme tu es intelligent !!!

Xixi20160512 le 11 sept. 2019

Modifier ce qui précède ne fonctionne pas réellement.
Comment les gens ignorent-ils les erreurs dactylographiées dans les fichiers TSX aujourd'hui? J'ai fait une tonne de recherches et je ne peux pas trouver une seule solution qui fonctionne. Ne pas pouvoir ignorer une déclaration est un défi de taille.

Fonctionne pour .tsx avec Typescript 3.6.2

adamhwang le 2 oct. 2019

👍1

(sauf si nous pensons vraiment quelque chose comme
{/* 
  // @ts-ignore */}
ça va?)

Ouais toutes ces règles de peluchage seront si heureuses de cette syntaxe

Faire ceci maintenant: neutral_face:

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

InsOpDe le 15 oct. 2019

❤3 😄3 👍2

J'ai rencontré encore plus de plaisir dans dactylographié 3.7 en conjonction avec plus joli, car plus joli garde les attributs sur une ligne séparée, et maintenant @ ts-ignore doit être positionné immédiatement avant la propriété, pas le début de la balise.

Voici la solution de contournement que j'ai:

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

précédemment:

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

junoatscroll le 6 nov. 2019

👍1

Aucune idée si plus jolie se plaindra également de spreads excessifs, mais

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

devrait également fonctionner? À un moment donné, le plus joli ignorer est tout simplement le meilleur choix. Il n'y a tout simplement pas beaucoup d'options pour les emplacements de commentaires dans jsx.

weswigham le 7 nov. 2019

👍2 😄1

Pourquoi est-ce fermé? Sommes-nous juste engagés dans la solution laide?

MFry le 28 févr. 2020

👍8 😄4

rouvrir s'il vous plaît ...

a-x- le 4 mars 2020

👍1

Sommes-nous juste engagés dans la solution laide?

Oui. Le correctif rapide fait maintenant la chose laide. La «beauté» n'est pas un problème lorsqu'il s'agit de suppressions qui, de toute évidence, devraient être des événements exceptionnels. Nous sommes assez verrouillés par ce que la syntaxe jsx permet, donc c'est vraiment ce que c'est.

weswigham le 4 mars 2020

Nous nous sommes définitivement engagés à la solution fugace ... mais peut-être pas.

Pouvons-nous voter / convenir de garder cela ouvert? J'adorerais m'attaquer à cela dans un certain temps libre, mais je ne veux pas perdre de temps si la solution actuelle est l'option préférée.

oshalygin le 19 mars 2020

D'accord. J'utilise actuellement la solution fugly car une bibliothèque tierce sur laquelle je me fie a des saisies incorrectes dans son dernier code. La solution Fugly fonctionne pour le moment, mais il serait bon d'avoir une seule ligne si possible.

sean-magin le 5 avr. 2020

Malheureusement, il n'y a pas d'autre moyen d'obtenir un commentaire dans jsx. Il doit être à moins de {} .

weswigham le 5 avr. 2020

👍1

Y a-t-il un problème distinct pour suivre la possibilité de cela?

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

forresthopkinsa le 28 avr. 2020

👍2

On dirait que nous sommes ouverts maintenant: https://github.com/microsoft/TypeScript/issues/37738
PR ici: https://github.com/microsoft/TypeScript/pull/38228 🎉

brieb le 29 avr. 2020

🚀2 🎉2

Je pense personnellement

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

est la meilleure solution et la plus universelle pour cela.

Les outils de formatage automatique (plus jolis, etc.) peuvent se tromper sous les hacks.

Remarque:
Cette solution fonctionne bien

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

alors que ce

<
// @ts-ignore
SomeComponent />

est formaté automatiquement et devient invalide (au moins sur mes plus jolis paramètres)

likern le 2 juin 2020

Sur la base du succès de # 38228, je pense que cela a atterri en 3.9: tada:

forresthopkinsa le 2 juin 2020

🎉1

Je suppose que c'est plus un problème JSX, mais vérifiez ceci:

Disons que j'ai ceci :

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 Je ne peux pas changer et je souhaite supprimer l'erreur que <MyComponent /> génère.

Cependant, l'ajout d'un autre élément aux enfants du SomeComponentFromLibrary rompt maintenant la contrainte de type children?: React.ReactElement , produisant une autre erreur de type.

Est-il possible de créer des commentaires dans JSX qui ne se transforment pas en code?