Typescript: يؤدي إصلاح رمز "تجاهل رسالة الخطأ هذه" في JSX إلى عرض `// @ ts-ignore`

تم إنشاؤها على ٤ أكتوبر ٢٠١٨ · 22تعليقات · مصدر: microsoft/TypeScript

إصدار TypeScript: 3.2.0-dev.20181004

مصطلحات البحث:

تعطيل JsDiagnostics
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 في ٨ أكتوبر ٢٠١٨

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

ال 22 كومينتر

يرجى ملاحظة ما يلي: ما لم نقم بإضافة نماذج قمع جديدة (على سبيل المثال ، مضمنة) ، فإن الإصلاح الوحيد لذلك هو تعطيل الإصلاح السريع عندما يتعذر إنشاء موضع منع صالح.

weswigham في ٨ أكتوبر ٢٠١٨

(ما لم نفكر حقًا في شيء مثل

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

هل هو جيد؟)

weswigham في ٨ أكتوبر ٢٠١٨

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

سيكون من الرائع إضافة نماذج قمع جديدة ، وحتى دعم استهداف أخطاء معينة. ولكن في حالة عدم وجود ذلك ، سنستخدم نموذج التعليق الغريب هذا لأننا نحتاج إلى القدرة على تجاهل الأخطاء في بنيات JSX. إنها ليست جميلة ، لكنها الشيء الوحيد الذي يعمل. لذلك ، يمكن للإصلاح إما (1) تضمينه في هذا النموذج أو (2) عدم تضمينه على الإطلاق (لذلك لا ينتهي بالعرض). يعجبني (1) على الرغم من أنها ليست جميلة لأنها صحيحة وظيفيًا - يبدو أنها لا تعمل إذا كان بإمكان القاعدة تجاهل كل شيء باستثناء الأخطاء الموجودة في جسم مكون JSX. علاوة على ذلك ، هناك بعض السوابق لتعليقات التجاهل ذات المظهر الغريب في سلاسل القالب. فمثلا،

const s = `
Hello ${doesnotexist}`;

يحصل تجاهل الإصلاح مثل

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

brieb في ٨ أكتوبر ٢٠١٨

👍2

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

رهيبة 🌹

proYang في ٢٥ مايو ٢٠١٩

👍29

هل هناك نمط آخر يستخدمه الآخرون؟

هذا هو حقا بناء جملة غريب

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

تحرير ما ورد أعلاه لا يعمل في الواقع.

كيف يتجاهل الأشخاص الأخطاء المطبعية داخل ملفات TSX اليوم؟ لقد أجريت الكثير من الأبحاث ولم أجد حلًا واحدًا يعمل. عدم القدرة على تجاهل بعض العبارات يمثل تحديًا كبيرًا.

oshalygin في ٢٥ يونيو ٢٠١٩

👍18 🚀1 ❤1 🎉1

شكل آخر (غريب المظهر) يعمل:

<
// @ts-ignore
SomeComponent />

crickford في ٣ يوليو ٢٠١٩

👍14 👀3

(ما لم نفكر حقًا في شيء مثل
{/* 
  // @ts-ignore */}
هل هو جيد؟)

كم انت ذكي !!!

Xixi20160512 في ١١ سبتمبر ٢٠١٩

تحرير ما ورد أعلاه لا يعمل في الواقع.
كيف يتجاهل الأشخاص الأخطاء المطبعية داخل ملفات TSX اليوم؟ لقد أجريت الكثير من الأبحاث ولم أجد حلًا واحدًا يعمل. عدم القدرة على تجاهل بعض العبارات يمثل تحديًا كبيرًا.

يعمل مقابل .tsx مع Typescript 3.6.2

adamhwang في ٢ أكتوبر ٢٠١٩

👍1

(ما لم نفكر حقًا في شيء مثل
{/* 
  // @ts-ignore */}
هل هو جيد؟)

نعم ، ستكون كل قواعد الفحص هذه سعيدة جدًا بهذا النحو

افعل هذا الآن:

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

InsOpDe في ١٥ أكتوبر ٢٠١٩

❤3 😄3 👍2

لقد واجهت المزيد من المرح في الكتابة المطبوعة 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 في ٦ نوفمبر ٢٠١٩

👍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 في ٧ نوفمبر ٢٠١٩

👍2 😄1

لماذا هذا مغلق؟ هل التزمنا للتو بالحل القبيح؟

MFry في ٢٨ فبراير ٢٠٢٠

👍8 😄4

أعد الفتح من فضلك ...

a-x- في ٤ مارس ٢٠٢٠

👍1

هل التزمنا للتو بالحل القبيح؟

نعم. الإصلاح السريع الآن يفعل الشيء القبيح. "الجمال" ليس مصدر قلق عندما يتعلق الأمر بالقمع الذي يجب أن يكون ، بكل الحقوق ، أحداثًا استثنائية. نحن مؤمنون تمامًا بما يسمح به بناء الجملة jsx ، لذلك فهو حقًا ما هو عليه.

weswigham في ٤ مارس ٢٠٢٠

نحن بالتأكيد ملتزمون بالحل الهارب ... لكن ربما لا.

هل يمكننا التصويت / الاتفاق على إبقاء هذا مفتوحا؟ أرغب في معالجة هذا الأمر في وقت فراغ ولكن لا أريد إضاعة الوقت إذا كان الحل الحالي هو الخيار المفضل.

oshalygin في ١٩ مارس ٢٠٢٠

متفق عليه. أستخدم حاليًا الحل fugly لأن مكتبة تابعة لجهة خارجية أعتمد عليها بها كتابة غير صحيحة في أحدث رمز لها. يعمل Fugly solution في الوقت الحالي ، ولكن سيكون من الجيد أن يكون لديك خط واحد إن أمكن.

sean-magin في ٥ أبريل ٢٠٢٠

للأسف ، لا توجد طريقة أخرى للحصول على تعليق في jsx. يجب أن يكون ضمن {} .

weswigham في ٥ أبريل ٢٠٢٠

👍1

هل هناك قضية منفصلة لتتبع إمكانية ذلك؟

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

forresthopkinsa في ٢٨ أبريل ٢٠٢٠

👍2

يبدو أننا منفتحون عليها الآن: https://github.com/microsoft/TypeScript/issues/37738
العلاقات العامة هنا: https://github.com/microsoft/TypeScript/pull/38228 🎉

brieb في ٢٩ أبريل ٢٠٢٠

🚀2 🎉2

وأنا شخصيا أعتقد

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

هو الحل الأفضل والأكثر عالمية لهذا الغرض.

قد تفسد أدوات التنسيق التلقائي (أجمل ، وما إلى ذلك) أدناه الاختراقات.

ملحوظة:
هذا الحل يعمل بشكل جيد

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

بينما هذا

<
// @ts-ignore
SomeComponent />

تم تنسيقه تلقائيًا ويصبح غير صالح (على الأقل في إعدادات أجمل)

likern في ٢ يونيو ٢٠٢٠

بناءً على نجاح # 38228 ، أعتقد أن هذا هبط في 3.9: tada:

forresthopkinsa في ٢ يونيو ٢٠٢٠

🎉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 لا تتحول إلى كود؟