tigtools

JSON إلى TypeScript

الصق استجابة JSON أو ملفًا لتحصل على تعريفات TypeScript يمكنك إضافتها مباشرة إلى كودك.

تعمل في متصفحك لا يلزم التسجيل

التصريح كـ

كيفية الاستخدام

  1. الصق JSON في مربع الإدخال، أو افتح ملف .json، أو جرّب المثال.
  2. حدد اسم النوع الجذري، مثل Order أو ApiResponse.
  3. اختر تعريفات interface أو type وما إذا كنت تريد إضافة export و readonly.
  4. انسخ TypeScript الناتج أو نزّله باسم types.ts.

كيف تعمل الأداة

يمرّ المولّد على مستند JSON كاملًا ويسجّل أنواع القيم الموجودة في كل موضع. يصبح كل كائن JSON تعريفًا مستقلًا باسمه. يُشتق الاسم من مفتاح الخاصية بصيغة PascalCase، فمثلًا يتحول “shipping_address” إلى ShippingAddress. تُسمّى عناصر المصفوفة وفق صيغة المفرد للمفتاح: “items” تعطي Item، و“categories” تعطي Category، والمفاتيح التي لا تبدو جمعًا تحصل على اللاحقة “Item”.

تُدمَج جميع الكائنات داخل المصفوفة الواحدة في واجهة واحدة. إذا ظهر مفتاح في بعضها فقط، عُلِّم اختياريًا بعلامة “?”. إذا كانت للقيمة أنواع مختلفة في مواضع مختلفة، يكون النوع اتحادًا مثل string | number. يُحتفَظ بـ null كنوع مستقل، لذا يصبح الحقل الذي يكون null أحيانًا string | null. تصبح المصفوفة الفارغة unknown[]، لأنه لا يوجد ما يمكن الاستدلال منه. الكائنان المتطابقان تمامًا في الخصائص والأنواع يشتركان في واجهة واحدة بدلًا من إنتاج نسخ مكررة. المفاتيح غير الصالحة كمعرّفات، مثل “first-name”، تُكتب بين علامتي اقتباس.

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

أمثلة

تحديد أنواع استجابة API

ألصق طلبًا من API متجرك مع الاسم الجذر Order. ستحصل على الواجهات Order وCustomer وItem وShipping، مع note?: string في Item لأن عنصرًا واحدًا فقط من العنصرين لديه ملاحظة.

إعدادات للقراءة فقط

ألصق ملف config.json، وحدِّد خيار “اجعل الخصائص للقراءة فقط” ثم ألصق الناتج في config.d.ts، حتى يلتقط المترجم أي كتابة غير مقصودة في الإعدادات.

مصفوفة في المستوى الأعلى

تعيد نقطة نهاية القائمة [{…}, {…}]. مع الاسم الجذر Product، يبدأ الناتج بـ “export type Product = ProductItem[];” متبوعًا بواجهة ProductItem.

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

لماذا يكون الحقل اختياريًا في الناتج؟

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

لماذا يُحدَّد نوع التاريخ على أنه string؟

ليس لدى JSON نوع للتاريخ، لذا تنتقل التواريخ كنصوص. لا يخمّن المولّد التنسيقات. غيّر النوع بنفسك إذا كان كودك يحوّلها إلى كائنات Date.

ما الفرق بين interface و type؟

بالنسبة لهيئة الكائنات، يعملان تقريبًا بالطريقة نفسها. يمكن توسيع interface ودمجها من خلال تعريفات لاحقة؛ أما type فلا يمكن إعادة فتحه. اختر الأسلوب المستخدم بالفعل في قاعدة الكود لديك.

هل يمكنه إنشاء تحقق في وقت التشغيل مثل مخططات Zod؟

لا. يُنتج تعريفات TypeScript فقط، وهي تُفحص في وقت الترجمة ولا تتحقق من البيانات في وقت التشغيل.

الخصوصية

تُحلَّل بيانات JSON في متصفحك فقط. لا يُرفع أي شيء ولا يُخزَّن ولا يُدرج في التحليلات.