Typescript: Исправление кода «Игнорировать это сообщение об ошибке» в JSX приводит к отображению `// @ ts-ignore`

Созданный на 4 окт. 2018 · 22Комментарии · Источник: microsoft/TypeScript

Версия TypeScript: 3.2.0-dev.20181004

Условия поиска:

disableJsDiagnostics
JSX
Исправление кода
Игнорируйте это сообщение об ошибке
Добавьте '@ ts-ignore' ко всем сообщениям об ошибках

Код

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

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

export default MyComponent;

Выполнение исправления кода Ignore this error message или Add '@ts-ignore' to all error messages вставляет // @ts-ignore удовлетворяющее компилятору.

Но,

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

фактически отобразит // @ts-ignore .

Ожидаемое поведение:

Похоже, {/* @ts-ignore */} или {/* // @ts-ignore */} не распознаются как допустимые комментарии игнорирования.

Итак, лучшее, что я мог придумать, это

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

Фактическое поведение:

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

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

export default MyComponent;

где по ошибке отображается // @ts-ignore .

Связанные вопросы:

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

Bug JSTSX Quick Fixes

Источник

brieb

👍27

Самый полезный комментарий

(если мы действительно не думаем что-то вроде

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

в порядке?)

weswigham 8 окт. 2018

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

Все 22 Комментарий

Обратите внимание: если мы не добавим новые формы подавления (т.е. встроенные), единственное исправление для этого - отключение быстрого исправления, когда действительная позиция подавления не может быть создана.

weswigham 8 окт. 2018

(если мы действительно не думаем что-то вроде

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

в порядке?)

weswigham 8 окт. 2018

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

Было бы здорово добавить новые формы подавления и даже поддержку для нацеливания на конкретные ошибки. Но в отсутствие этого мы будем использовать эту странную форму комментариев, поскольку нам нужна возможность игнорировать ошибки в конструкциях JSX. Это некрасиво, но это единственное, что работает. Итак, исправление может либо (1) включить его в эту форму, либо (2) не включать его вообще (чтобы оно не закончилось рендерингом). Мне нравится (1), хотя это не очень красиво, потому что оно функционально корректно - это могло бы показаться неправильным, если бы правило могло игнорировать все, кроме ошибок в теле JSX-компонента. Более того, есть прецедент странно выглядящих игнорируемых комментариев в строках шаблона. Например,

const s = `
Hello ${doesnotexist}`;

фиксируется-игнорируется как

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

brieb 8 окт. 2018

👍2

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

круто 🌹

proYang 25 мая 2019

👍29

Есть ли другой шаблон, который используют другие?

Это действительно очень странный синтаксис

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

Редактировать приведенное выше на самом деле не работает.

Как люди сегодня игнорируют ошибки машинописного текста внутри файлов TSX ? Я провел массу исследований и не могу найти ни одного работающего решения. Невозможно проигнорировать какое-либо утверждение - огромная проблема.

oshalygin 25 июн. 2019

👍18 🚀1 ❤1 🎉1

Другой (странно выглядящий) вариант, который работает:

<
// @ts-ignore
SomeComponent />

crickford 3 июл. 2019

👍14 👀3

(если мы действительно не думаем что-то вроде
{/* 
  // @ts-ignore */}
в порядке?)

какой ты умный !!!

Xixi20160512 11 сент. 2019

Редактировать приведенное выше на самом деле не работает.
Как люди сегодня игнорируют ошибки машинописного текста внутри файлов TSX ? Я провел массу исследований и не могу найти ни одного работающего решения. Невозможно проигнорировать какое-либо утверждение - огромная проблема.

Работает для .tsx с Typescript 3.6.2

adamhwang 2 окт. 2019

👍1

(если мы действительно не думаем что-то вроде
{/* 
  // @ts-ignore */}
в порядке?)

Да, все эти правила линтинга будут очень довольны этим синтаксисом

Сделаем это сейчас: нейтральное_лицо:

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

InsOpDe 15 окт. 2019

❤3 😄3 👍2

Я столкнулся с еще большим удовольствием в typescript 3.7 в сочетании с prettier, потому что prettier хранит атрибуты в отдельной строке, и теперь @ ts-ignore нужно размещать непосредственно перед свойством, а не в начале тега.

Вот обходной путь, который у меня есть:

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

ранее:

    {/* 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 6 нояб. 2019

👍1

Не знаю, будет ли красивее тоже жаловаться на чрезмерные спреды, но

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

тоже должно работать? Однако в какой-то момент более красивое игнорирование - это просто лучший выбор. Просто не так много вариантов для размещения комментариев внутри jsx.

weswigham 7 нояб. 2019

👍2 😄1

Почему это закрыто? Мы просто приняли уродливое решение?

MFry 28 февр. 2020

👍8 😄4

откройте пожалуйста ...

a-x- 4 мар. 2020

👍1

Мы просто приняли уродливое решение?

Ага. Теперь быстрое исправление делает ужасную вещь. «красивость» не вызывает беспокойства, когда речь идет о подавлении, которое, по всем правилам, должно быть исключительным событием. Мы очень привязаны к тому, что позволяет синтаксис jsx, так что это действительно то, что есть.

weswigham 4 мар. 2020

Мы определенно стремимся к быстрому решению проблемы ... но, возможно, нет.

Можем ли мы проголосовать / согласиться, чтобы оставить это открытым? Я хотел бы заняться этим в свободное время, но не хочу терять время, если текущее решение является предпочтительным вариантом.

oshalygin 19 мар. 2020

Согласовано. В настоящее время я использую решение fugly, потому что сторонняя библиотека, на которую я полагаю, имеет неправильную типизацию в своем последнем коде. Решение Fugly пока работает, но было бы неплохо иметь однострочник, если это возможно.

sean-magin 5 апр. 2020

К сожалению, другого способа получить комментарий в jsx нет. Это должно быть в пределах {} .

weswigham 5 апр. 2020

👍1

Есть ли отдельный вопрос, чтобы отслеживать возможность этого?

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

forresthopkinsa 28 апр. 2020

👍2

Похоже, мы открыты для этого сейчас: https://github.com/microsoft/TypeScript/issues/37738
PR здесь: https://github.com/microsoft/TypeScript/pull/38228 🎉

brieb 29 апр. 2020

🚀2 🎉2

Я лично думаю

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

- лучшее и самое универсальное решение для этого.

Инструменты автоматического форматирования (красивее и т. Д.) Могут облажаться ниже хаков.

Заметка:
Это решение работает нормально

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

пока это

<
// @ts-ignore
SomeComponent />

автоматически форматируется и становится недействительным (по крайней мере, в моих более красивых настройках)

likern 2 июн. 2020

Основываясь на успехе # 38228, я думаю, что это произошло в 3.9: tada:

forresthopkinsa 2 июн. 2020

🎉1

Я предполагаю, что это скорее проблема JSX, но проверьте это:

Допустим, у меня есть это :

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 Я не могу изменить и хочу подавить ошибку, которую генерирует <MyComponent /> .

Однако добавление еще одного элемента к дочерним элементам SomeComponentFromLibrary теперь нарушает ограничение children?: React.ReactElement type, что приводит к ошибке другого типа.

Можно ли создавать в JSX комментарии, которые не преобразуются в код?