Typescript: JSX中的“忽略此错误消息”代码修复导致呈现`// @ ts-ignore`

创建于 2018-10-04 · 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错误地呈现的位置。

Bug JSTSX Quick Fixes

资料来源

brieb

👍27

最有用的评论

（除非我们真的认为

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

可以吗？）

weswigham 于 2018-10-08

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

所有22条评论

请注意：除非我们添加新的禁止表格（即，内联），否则唯一的解决方法是在无法产生有效的禁止位置时禁用快速修复。

weswigham 于 2018-10-08

（除非我们真的认为

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

可以吗？）

weswigham 于 2018-10-08

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

添加新的抑制形式，甚至支持针对特定错误的支持都将非常棒。但是，如果没有这种方法，我们将使用该怪异注释形式，因为我们需要能够忽略JSX构造中的错误。这不是很漂亮，但这是唯一可行的方法。因此，修复程序可能（1）以这种形式包含它，或者（2）根本不包含它（因此它最终不会呈现）。我喜欢（1），尽管它不是很漂亮，因为它在功能上是正确的-如果该规则可以忽略除JSX组件主体中的错误以外的所有内容，那似乎就不对了。此外，在模板字符串中有一些看起来奇怪的忽略注释的先例。例如，

const s = `
Hello ${doesnotexist}`;

被修复忽略为

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

brieb 于 2018-10-08

👍2

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

很棒🌹

proYang 于 2019-05-25

👍29

还有其他人正在使用的模式吗？

这真的是很奇怪的语法

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

编辑以上内容实际上无效。

今天人们如何忽略TSX文件中的打字稿错误？我已经做了很多研究，找不到一个可行的解决方案。无法忽略某些陈述是一个巨大的挑战。

oshalygin 于 2019-06-25

👍18 🚀1 ❤1 🎉1

另一个有效的变种：

<
// @ts-ignore
SomeComponent />

crickford 于 2019-07-03

👍14 👀3

（除非我们真的认为
{/* 
  // @ts-ignore */}
可以吗？）

你有多聪明！

Xixi20160512 于 2019-09-11

编辑以上内容实际上无效。
今天人们如何忽略TSX文件中的打字稿错误？我已经做了很多研究，找不到一个可行的解决方案。无法忽略某些陈述是一个巨大的挑战。

适用于.tsx和Typescript 3.6.2

adamhwang 于 2019-10-02

👍1

（除非我们真的认为
{/* 
  // @ts-ignore */}
可以吗？）

是的，所有这些规则规则都会对该语法感到非常满意

现在执行此操作：neutral_face：

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

InsOpDe 于 2019-10-15

❤3 😄3 👍2

我在TypeScript 3.7中与更漂亮的字体一起玩得更加有趣，因为更漂亮的属性将属性保持在单独的行上，现在@ 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 于 2019-11-06

👍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 于 2019-11-07

👍2 😄1

为什么关闭？我们只是致力于丑陋的解决方案吗？

MFry 于 2020-02-28

👍8 😄4

请重新打开...

a-x- 于 2020-03-04

👍1

我们只是致力于丑陋的解决方案吗？

是的 quickfix现在可以做丑事了。压制从本质上讲应该是例外事件，因此“礼节性”并不是问题。 jsx语法允许我们完全锁定，所以确实如此。

weswigham 于 2020-03-04

我们绝对致力于这个笨拙的解决方案……但也许不是。

我们可以投票/同意保持开放吗？我希望在空闲时间解决此问题，但是如果当前的解决方案是首选，则不想浪费时间。

oshalygin 于 2020-03-19

同意我目前使用的是笨拙的解决方案，因为我所依赖的第3方库在其最新代码中键入错误。笨拙的解决方案目前可以使用，但如果可能的话，最好有一个衬套。

sean-magin 于 2020-04-05

可悲的是，没有其他方法可以在jsx中获得评论。它必须在{} 。

weswigham 于 2020-04-05

👍1

是否有单独的问题来跟踪这种可能性？

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

forresthopkinsa 于 2020-04-28

👍2

听起来我们现在已经开放： https ：
PR在这里： https: //github.com/microsoft/TypeScript/pull/38228🎉

brieb 于 2020-04-29

🚀2 🎉2

我个人认为

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

是最好，最通用的解决方案。

自动格式化工具（更漂亮的等）可能会被黑客破解。

注意：
这个解决方案工作正常

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

而这

<
// @ts-ignore
SomeComponent />

已自动格式化，并且无效（至少在我的漂亮设置上）

likern 于 2020-06-02

基于＃38228的成功，我认为它落在3.9中：tada：

forresthopkinsa 于 2020-06-02

🎉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类型约束，从而产生另一个类型错误。

是否可以在JSX中创建未转换为代码的注释？

lxe 于 2020-10-30

此页面是否有帮助？

0 / 5 - 0 等级

Typescript: JSX中的“忽略此错误消息”代码修复导致呈现`// @ ts-ignore`

最有用的评论

所有22条评论

相关问题