تخطَّ إلى المحتوى الرئيسي
Tooletto

مُنسِّق TypeScript

إعداد مسبق لأداة مُنسِّق JavaScript

نسِّق TypeScript بدعم كامل لتعليقات الأنواع والأنواع العامة والمُزخرِفات والواجهات. يستخدم مُحلِّل TypeScript بدلًا من مُحلِّل JavaScript، لذا تُفهَم صياغة الأنواع بدلًا من مُعاملتها كخطأ.

  • الملفات لا تغادر جهازك أبدًا
  • مجاني، بدون تسجيل
  • بدون علامات مائية
  • يعمل دون اتصال بعد التحميل
Loading tool…

كيفية استخدام مُنسِّق JavaScript

  1. 1

    ألصق كودك

    JavaScript أو TypeScript أو JSX.

  2. 2

    حدّد نمطك

    المسافة البادئة، الفاصلة المنقوطة، وتفضيل علامات الاقتباس.

  3. 3

    انسخ النتيجة

    مُنسَّق بالضبط كما سيفعل Prettier في محررك.

لماذا يحتاج TypeScript مُحلِّله الخاص بدلًا من إعادة استخدام مُحلِّل JavaScript

TypeScript مجموعة فائقة من JavaScript، لكن صياغة مستوى الأنواع التي يُضيفها — الواجهات، الأنواع العامة المُقيَّدة بـ`extends`، المُزخرِفات، تأكيدات النوع `as`، والتصريحات المستقلة الخاصة بالأنواع فقط — ليس لها أي معنى في قواعد JavaScript العادية وتجعل مُحلِّلًا يفهم JavaScript فقط يفشل مباشرة في TypeScript صالح تمامًا. استخدام مُحلِّل TypeScript المخصص بدلًا من محاولة إجبار مُحلِّل JavaScript على قبول مجموعة فائقة من قواعده الخاصة هو ما يسمح لملف مليء بالأنواع العامة والواجهات بالتنسيق بشكل صحيح بدلًا من رفضه كخطأ صياغة في اللحظة التي يستخدم فيها ميزة لا يملكها JavaScript نفسه.

JSX داخل TypeScript، تحديدًا

ملف `.tsx` يجمع صياغة JSX مع تعليقات أنواع TypeScript غامض حقًا للتحليل عند نقطة معينة: تأكيد نوع بأقواس زاويّة مثل `<Foo>value` يبدو مطابقًا لبداية وسم عنصر JSX لمُحلِّل لم يُخبَر بأي لهجة يقرأ. اختيار وضع تحليل TypeScript-مع-JSX يحل ذلك الغموض بشكل صحيح، لذا اختيار اللهجة الصحيحة مسبقًا — بدلًا من افتراض أن مُحلِّل JavaScript عامًا سيحله — مهم تحديدًا لملفات المكونات التي تمزج الاثنين.

المُزخرِفات لا تزال جزءًا متطورًا من الصياغة

المُزخرِفات — التعليقات التوضيحية على طراز `@Component` الشائعة في Angular وبعض أُطر عمل الخلفية المبنية على TypeScript — مرت بعدة مراحل اقتراح متمايزة في عملية توحيد اللغة، ويمكن لقواعد كود مختلفة استهداف نسخ مختلفة قليلًا من تلك الصياغة حسب متى كُتبت وأي خيارات مُترجم تستخدم. تحليل صياغة المُزخرِفات بشكل صحيح يتطلب تحديدًا مُحلِّل TypeScript الواعي؛ مُحلِّل JavaScript عادي يصادف `@` قبل صنف أو دالة ليس له أي معنى مُعرَّف يلجأ إليه وسيرفض الملف مباشرة.

الأسئلة الشائعة

هل هذا نفس تشغيل Prettier محليًا؟

نعم — إنه Prettier نفسه، يعمل في متصفحك بدلًا من Node. بنفس الخيارات تحصل على إخراج مطابق بايت لبايت لـ`npx prettier` على نفس الملف.

لماذا لا تُستخدَم أداة تنسيق أبسط؟

لأن أدوات التنسيق الساذجة تكسر الكود الحقيقي. الأقواس المعقوفة داخل القوالب النصية والتعبيرات النمطية، وJSX، والإدراج التلقائي للفاصلة المنقوطة كلها تتطلب تحليل اللغة فعليًا. أداة تنسيق تُفسد بصمت ملفًا واحدًا من كل خمسين أسوأ من عدمها.

هل تعمل مع TypeScript وJSX؟

نعم. تُحلَّل تعليقات الأنواع والأنواع العامة والمُزخرِفات (decorators) وJSX كلها. لاحظ أنها تُنسِّق فقط — لا تتحقق من الأنواع ولا تُحوِّل.

لماذا فشل التنسيق؟

الكود به خطأ صياغة — يجب على Prettier تحليله قبل أن يستطيع طباعته. تتضمن الرسالة سطر وعمود المشكلة الأولى، وهو عادةً كافٍ لإيجادها.

هل يُرسَل كودي إلى خادم؟

لا. يُنزَّل Prettier إلى متصفحك ويعمل هناك. لا يغادر الكود المملوك جهازك أبدًا، وهذا غير صحيح في معظم أدوات التنسيق عبر الإنترنت.