محوّل JSON إلى TypeScript

الصق استجابة API واحصل على واجهات TypeScript أو أسماء أنواع مستعارة جاهزة للاستخدام، مع استنتاج الأنواع المتداخلة والحقول الاختيارية واتحادات null تلقائيًا.

يعمل في متصفحكبدون تسجيللا يُرفع شيء

TypeScript

طريقة استخدام JSON إلى TypeScript

  1. الصق عينة JSON، مثل استجابة API، في المربع الأيمن أو افتح ملف .json.
  2. اضبط اسم نوع الجذر (مثل User أو ApiResponse).
  3. اختر تصريحات interface أو type وفعّل export أو readonly أو جعل كل الحقول اختيارية.
  4. اختر unknown (أكثر أمانًا) أو any للقيم التي لا تكشفها العينة، مثل المصفوفات الفارغة وقيم null.
  5. انسخ الكود المُنشأ أو نزّله كملف .ts.

كيف تُستنتج الأنواع

  • الأنواع الأولية: تُربط السلاسل النصية والأعداد والقيم المنطقية بـ string وnumber وboolean.
  • الكائنات المتداخلة تصبح واجهات مسمّاة خاصة بها بصيغة PascalCase، فيصبح billing_address بالشكل BillingAddress.
  • مصفوفات الكائنات تُدمج في نوع عنصر واحد يُسمّى بصيغة المفرد: users تعطي User[]. والمفتاح المفقود من بعض العناصر يصبح اختياريًا (key?:).
  • قيم null تُدمج مع القيم الأخرى المرصودة لذلك المفتاح: string | null. والمفتاح الذي يكون دائمًا null فقط يعود إلى unknown أو any.
  • المصفوفات المختلطة تصبح مصفوفات اتحاد مثل (number | string)[].
  • الأشكال المتطابقة يُصرَّح عنها مرة واحدة ويُعاد استخدامها، والأشكال المختلفة التي قد تتشارك اسمًا تحصل على لاحقة رقمية.
  • المفاتيح التي ليست معرّفات صالحة، مثل "first-name" أو "2fa"، توضع بين علامتي اقتباس.

interface مقابل type

بالنسبة لأشكال الكائنات البسيطة، يكاد الاثنان يكونان قابلين للتبادل. يمكن توسيع تصريحات interface ودمجها، وتعطي أخطاء مترجم أوضح قليلًا. أما أسماء type المستعارة فيمكنها أيضًا التعبير عن الاتحادات والأنواع المعيَّنة (mapped types). تستخدم فرق كثيرة الواجهات لنماذج API والأنواع لكل ما عدا ذلك؛ اختر ما يتوقعه مشروعك أو أداة الفحص لديك (@typescript-eslint/consistent-type-definitions).

احصل على أنواع أفضل من عينتك

لا يمكن أن تكون الأنواع أكمل من العينة. الصق استجابة تتضمن الحقول الاختيارية، أو مصفوفة بعدة عناصر متنوعة، ليتمكن المولّد من اكتشاف المفاتيح الاختيارية والقابلة لـ null. تصل قيم مثل التواريخ والتعدادات كسلاسل نصية عادية في JSON؛ ضيّقها يدويًا بعد ذلك، مثل status: 'active' | 'disabled'. وللتحقق أثناء التشغيل، اجمع الأنواع المُنشأة مع مكتبة مخططات مثل Zod.

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

هل يُرفع JSON الخاص بي؟
لا. تُنشأ الأنواع بواسطة JavaScript في متصفحك. استجابات API التي تحتوي على رموز مميزة أو بيانات شخصية لا تغادر جهازك أبدًا.
كيف تُكتشف الخصائص الاختيارية؟
عندما تكون للكائنات في المصفوفة نفسها مفاتيح مختلفة، تُميَّز المفاتيح المفقودة من كائن واحد على الأقل كاختيارية بـ ?. ومع كائن واحد يكون كل مفتاح مطلوبًا، ما لم تفعّل الكل اختياري.
هل أستخدم <code>unknown</code> أم <code>any</code>؟
unknown أكثر أمانًا: إذ تُلزمك TypeScript بتضييق القيمة قبل استخدامها. أما any فيوقف فحص الأنواع لتلك القيمة. استخدمه فقط إذا كنت تخطط لتحسين الأنواع لاحقًا.
لماذا يُعطى تاريخ ISO النوع <code>string</code>؟
لا يحتوي JSON على نوع للتاريخ، لذا تُنقل التواريخ كسلاسل نصية. إذا حوّلتها باستخدام new Date() بعد التحليل، فغيّر الخاصية إلى Date في نموذجك.
هل يتعامل مع JSON الكبير أو شديد التداخل؟
نعم. يتناسب الإنشاء خطيًا مع حجم المدخلات ويعمل محليًا، لذا تُحوَّل الاستجابات التي تبلغ عدة ميغابايتات في أقل من ثانية.

أدوات ذات صلة