Typescript: Perbaikan kode "Abaikan pesan kesalahan ini" di JSX menghasilkan rendering `// @ ts-ignore`

Harap diperhatikan: Kecuali jika kami menambahkan formulir penindasan baru (yaitu, sebaris), satu-satunya perbaikan untuk ini adalah menonaktifkan perbaikan cepat ketika posisi penindasan yang valid tidak dapat dibuat.

(kecuali kita benar-benar memikirkan sesuatu seperti

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

apakah oke?)

Akan luar biasa untuk menambahkan formulir penindasan baru, dan bahkan dukungan untuk menargetkan kesalahan tertentu. Namun, jika tidak ada, kami akan menggunakan formulir komentar aneh tersebut karena kami memerlukan kemampuan untuk mengabaikan kesalahan dalam konstruksi JSX. Tidak cantik, tapi itu satu-satunya yang berhasil. Jadi, perbaikannya bisa (1) memasukkannya ke dalam formulir ini atau (2) tidak menyertakannya sama sekali (jadi itu tidak berakhir dengan rendering). Saya suka (1) meskipun tidak cantik karena secara fungsional benar - akan terlihat tidak aktif jika aturan dapat mengabaikan semuanya kecuali error di badan komponen JSX. Selain itu, ada beberapa preseden untuk komentar abaikan yang tampak aneh di string template. Sebagai contoh,

const s = `
Hello ${doesnotexist}`;

diperbaiki-diabaikan sebagai

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

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

mengagumkan 🌹

Apakah ada pola lain yang digunakan orang lain?

Ini benar-benar sintaks yang sangat aneh

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

Edit di atas sebenarnya tidak berfungsi.

Bagaimana orang mengabaikan kesalahan skrip dalam TSX file hari ini? Saya telah melakukan banyak penelitian dan tidak dapat menemukan satu solusi pun yang berhasil. Tidak bisa mengabaikan beberapa pernyataan adalah tantangan besar.

Variasi lain (tampak aneh) yang berfungsi:

<
// @ts-ignore
SomeComponent />

(kecuali kita benar-benar memikirkan sesuatu seperti

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

apakah oke?)

seberapa pintar Anda !!!

Edit di atas sebenarnya tidak berfungsi.

Bagaimana orang mengabaikan kesalahan skrip ketikan di dalam file TSX hari ini? Saya telah melakukan banyak penelitian dan tidak dapat menemukan satu solusi pun yang berhasil. Tidak bisa mengabaikan beberapa pernyataan adalah tantangan besar.

Bekerja untuk .tsx dengan Typecript 3.6.2

(kecuali kita benar-benar memikirkan sesuatu seperti

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

apakah oke?)

Ya, semua aturan linting akan sangat senang dengan sintaks itu

Lakukan ini sekarang: neutral_face:

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

Saya menjadi lebih asyik dalam ketikan 3.7 dalam hubungannya dengan lebih cantik, karena lebih cantik menjaga atribut pada baris terpisah, dan sekarang @ ts-ignore harus diposisikan tepat sebelum properti, bukan awal tag.

Inilah solusi yang saya miliki:

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

sebelumnya:

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

Tidak tahu apakah lebih cantik juga akan mengeluh tentang spread yang berlebihan, tapi

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

juga harus bekerja? Namun, pada titik tertentu pengabaian yang lebih cantik hanyalah pilihan yang lebih baik. Tidak banyak pilihan untuk lokasi komentar di dalam jsx.

Mengapa ini ditutup? Apakah kita baru saja berkomitmen pada solusi buruk?

tolong buka kembali ...

Apakah kita baru saja berkomitmen pada solusi buruk?

Ya. Perbaikan cepat sekarang melakukan hal yang buruk. "kecantikan" bukanlah perhatian dalam hal penindasan yang, menurut semua hak, harus merupakan peristiwa luar biasa. Kami cukup terkunci oleh apa yang memungkinkan sintaks jsx, jadi memang seperti itu.

Kami benar-benar berkomitmen pada solusi fugly ... tapi mungkin tidak.

Bisakah kita memilih / setuju untuk tetap membuka ini? Saya ingin menangani ini di waktu luang tetapi tidak ingin membuang waktu jika solusi saat ini adalah opsi yang lebih disukai.

Sepakat. Saat ini saya menggunakan solusi fugly karena perpustakaan pihak ke-3 yang saya andalkan memiliki pengetikan yang salah dalam kode terbaru mereka. Solusi Fugly berfungsi untuk saat ini, tetapi akan lebih baik untuk memiliki solusi satu baris jika memungkinkan.

Sayangnya, tidak ada cara lain untuk mendapatkan komentar di jsx. Itu harus dalam {} .

Apakah ada masalah tersendiri untuk melacak kemungkinan ini?

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

Sepertinya kami terbuka untuk itu sekarang: https://github.com/microsoft/TypeScript/issues/37738
PR di sini: https://github.com/microsoft/TypeScript/pull/38228 🎉

Saya pribadi berpikir

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

adalah solusi terbaik dan paling universal untuk ini.

Alat pemformatan otomatis (lebih cantik, dll.) Dapat gagal di bawah peretasan.

catatan:
Solusi ini berfungsi dengan baik

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

sementara ini

<
// @ts-ignore
SomeComponent />

diformat secara otomatis dan menjadi tidak valid (setidaknya di pengaturan saya yang lebih cantik)

Berdasarkan keberhasilan # 38228 saya pikir ini mendarat di 3.9: tada:

Saya kira ini lebih merupakan masalah BEJ, tapi lihat ini:

Katakanlah saya punya ini :

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 Saya tidak bisa mengubah, dan saya ingin mengatasi kesalahan yang dihasilkan <MyComponent /> .

Namun, menambahkan elemen lain ke turunan dari SomeComponentFromLibrary sekarang mematahkan batasan tipe children?: React.ReactElement , menghasilkan kesalahan tipe lain.

Apakah mungkin membuat komentar di JSX yang tidak diubah menjadi kode?