Typescript: JSX의 "이 오류 메시지 무시"코드 수정으로`// @ ts-ignore`가 렌더링 됨

참고 : 새 억제 양식 (예 : 인라인)을 추가하지 않는 한, 유효한 억제 위치를 생성 할 수 없을 때 빠른 수정을 비활성화하는 것이 유일한 해결 방법입니다.

(우리가 정말로 뭔가를 생각하지 않는 한

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

괜찮아?)

새로운 억제 양식을 추가하고 특정 오류를 대상으로 지원하는 것도 멋질 것입니다. 그러나 그것이 없으면 JSX 구조의 오류를 무시할 수있는 기능이 필요하기 때문에 이상한 주석 양식을 사용할 것입니다. 예쁘지는 않지만 작동하는 유일한 것입니다. 따라서 수정은 (1)이 양식에 포함하거나 (2) 전혀 포함하지 않을 수 있습니다 (그러므로 렌더링이 끝나지 않음). 기능적으로 정확하기 때문에 예쁘지는 않지만 (1)을 좋아합니다. 규칙이 JSX 구성 요소 본문의 오류를 제외한 모든 것을 무시할 수 있다면 꺼져 보일 것입니다. 또한 템플릿 문자열에 이상한 무시 주석에 대한 선례가 있습니다. 예를 들면

const s = `
Hello ${doesnotexist}`;

수정 무시됩니다

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

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

굉장 🌹

다른 사람들이 사용하는 다른 패턴이 있습니까?

이것은 정말 이상한 구문입니다.

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

위의 편집은 실제로 작동하지 않습니다.

사람들은 오늘날 TSX 파일 내에서 typescript 오류를 어떻게 무시하고 있습니까? 많은 연구를 수행했지만 작동하는 단일 솔루션을 찾을 수 없습니다. 일부 진술을 무시할 수 없다는 것은 큰 도전입니다.

작동하는 또 다른 (이상해 보이는) 변형 :

<
// @ts-ignore
SomeComponent />

(우리가 정말로 뭔가를 생각하지 않는 한

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

괜찮아?)

얼마나 똑똑 하냐 !!!

위의 편집은 실제로 작동하지 않습니다.

오늘날 사람들은 TSX 파일 내에서 typescript 오류를 어떻게 무시하고 있습니까? 많은 연구를 수행했지만 작동하는 단일 솔루션을 찾을 수 없습니다. 일부 진술을 무시할 수 없다는 것은 큰 도전입니다.

Typescript 3.6.2에서 .tsx 에서 작동

(우리가 정말로 뭔가를 생각하지 않는 한

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

괜찮아?)

예, 모든 linting 규칙은 해당 구문에 대해 매우 만족할 것입니다.

지금 수행 : neutral_face :

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

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

더 예뻐지는 것도 과도한 스프레드에 대해 불평할지 모르겠지만

    <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 내부에는 주석 위치에 대한 옵션이 많지 않습니다.

왜 이것이 닫혀 있습니까? 우리는 추악한 해결책에 전념 했습니까?

다시 열어주세요 ...

우리는 추악한 해결책에 전념 했습니까?

네. 퀵 픽스는 이제 못생긴 일을합니다. 모든 권리에 의해 예외적 인 사건이되어야하는 탄압과 관련하여 "예쁘다"는 것은 문제가되지 않는다. 우리는 jsx 구문이 허용하는 것에 의해 꽤 잠겨 있으므로 실제로 그 자체입니다.

우리는 분명히 추악한 해결책에 전념했지만 ...

이 공개 상태를 유지하는 데 투표 / 동의 할 수 있습니까? 자유 시간에이 문제를 해결하고 싶지만 현재 솔루션이 선호되는 옵션이라면 시간을 낭비하고 싶지 않습니다.

동의합니다. 내가 의존하는 타사 라이브러리의 최신 코드에 잘못된 입력이 있기 때문에 현재 미루는 솔루션을 사용하고 있습니다. 추악한 솔루션은 현재 작동하지만 가능하면 한 줄짜리를 사용하는 것이 좋습니다.

슬프게도 jsx에서 주석을 얻는 다른 방법은 없습니다. {} 이내 여야합니다.

이 가능성을 추적하는 별도의 문제가 있습니까?

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

지금 열려있는 것 같습니다 : https://github.com/microsoft/TypeScript/issues/37738
PR 여기 : https://github.com/microsoft/TypeScript/pull/38228 🎉

나는 개인적으로 생각한다

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

이를위한 최고이자 가장 보편적 인 솔루션입니다.

자동 서식 지정 도구 (예쁜 등)는 해킹을 당할 수 있습니다.

노트 :
이 솔루션은 잘 작동합니다.

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

이 동안

<
// @ts-ignore
SomeComponent />

자동 서식이 지정되고 유효하지 않게됩니다 (적어도 더 예쁜 설정에서).

# 38228의 성공을 바탕으로 3.9 : tada에 도달했다고 생각합니다.

나는 이것이 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에서 작성할 수 있습니까?