Skip to content
JSON إلى TypeScript
Tools

JSON إلى TypeScript

جديد

أنشئ واجهات TypeScript من عيّنة JSON، مع الأنواع المتداخلة.

Output

Runs entirely in your browser. Nothing is uploaded.

حوّل JSON إلى TypeScript بنقرة واحدة

يُولّد هذا المحوّل JSON إلى TypeScript واجهاتٍ وأنواعاً أو فئاتٍ جاهزةً للاستخدام من نموذج JSON، حتى لا تضطر إلى كتابة نوع يدوياً لاستجابة API مرةً أخرى. الصق الـ payload على اليسار وسيظهر TypeScript نظيفٌ ومحاذى بشكل صحيح على الفور في الجانب الأيمن — انسخه أو نزّله كملف .ts.

إنه بديلٌ سريع ومجاني لا يستلزم تسجيلاً: خطوةٌ واحدة من JSON إلى واجهة TypeScript تعمل كلياً في متصفحك، مع استنتاج الكائنات المتداخلة والمصفوفات والاتحادات تلقائياً. لا قيود على حجم الملف، ولا حد استخدام يومي، ولا يغادر شيءٌ جهازك أبداً.

واجهات أو أنواع أو فئات — الخيار لك

استخدم مُبدّل الإخراج للتبديل بين interface أو اسم مستعار type أو class. وضع الواجهة هو الافتراضي ويُصدر export interface Root { … }؛ ووضع النوع يُنتج export type Root = { … } للكودبيس التي تُفضّل الأسماء المستعارة؛ ووضع الفئة يُعلن الحقول في export class. نفس JSON يغذّي الثلاثة، فيمكنك مقارنتها ببياناتك الخاصة في ثوانٍ.

يمكنك إعادة تسمية الجذر، وتشغيل أو إيقاف الكلمة المفتاحية export، ويُحفظ الاختيار للمرة القادمة — ما يجعل هذه الأداة مولّداً مرناً لأنواع TypeScript بدلاً من محوّل أحادي الشكل.

استنتاج ذكي للكائنات المتداخلة والمصفوفات والاتحادات

يتجوّل المحرك عبر JSON ويبني واجهةً مُسمّاةً لكل كائن، مُعطياً للواجهات المتداخلة أسماءً مستمدةً من مفاتيحها، ومُفرداً عناصر المصفوفات — تصبح مصفوفة orders هي Order[]. تُدمج الأشكال المتطابقة في واجهة واحدة، وتنهار مصفوفات الأنواع المختلطة إلى اتحاد مثل (string | number)[].

فعّل اكتشاف التعدادات وسيتم استنتاج قيم السلاسل المتكررة كاتحاد حرفي — عمود حالة يحتوي على "مُشحون" و"قيد الانتظار" يصبح "قيد الانتظار" | "مُشحون" بدلاً من string عام. هذه الدقة تجعل الإخراج يبدو كأنه مكتوب يدوياً.

الحقول الاختيارية والفارغة وللقراءة فقط بشكل صحيح

بيانات API الحقيقية ليست مثالية، لذا يتعامل المحوّل معها بصدق. عند تحويل استجابة API إلى TypeScript، تُوسَم المفاتيح التي تظهر فقط في بعض عناصر المصفوفة باختيارية بعلامة ?، وأنت تقرر كيف تُكتب القيم الفارغة: احتفظ بها كاتحاد صريح | null، أو فعّل null → اختياري لتحويل zip: string | null إلى zip?: string.

يُضيف مُبدّل readonly البادئةَ readonly لكل خاصية للنماذج غير القابلة للتغيير. تتيح لك هذه الخيارات مطابقة صرامة مشروعك بدلاً من مقاومة أنواع TypeScript المولّدة من JSON.

مقارنة مع quicktype وjson2ts وMakeTypes

quicktype.io هو الخيار الأكثر اكتمالاً للتوليد متعدد اللغات — يستهدف Python وGo وC# وKotlin وكثيراً من اللغات الأخرى إلى جانب TypeScript. هذا الاتساع يعني أن إخراج TypeScript الخاص به يتضمن أحياناً مساعدي وقت التشغيل وكوداً إضافياً. كما يعالج JSON على خوادمه، وهو ما يهم للـ payloads السرية. json2ts.com أبسط ويُنشئ واجهات أساسية لكنه يفتقر إلى اكتشاف التعدادات ودعم readonly وخيارات معالجة الفارغ.

MakeTypes يُنشئ فئات TypeScript مع تحليل وقت التشغيل. يُنشئ محوّل UtiloKit هذا أنواعاً نقية دون أي بصمة وقت تشغيل — فقط الواجهات أو أسماء الأنواع المستعارة التي يحتاجها كودك، يعمل كلياً في متصفحك دون رفع للخادم ودون حساب.

خصوصية بحكم التصميم — JSON لا يغادر المتصفح أبداً

يحدث كل تحويل محلياً باستخدام JavaScript في تبويبك. لا يُرفع JSON أبداً إلى خادم، ولا يُخزَّن أو يُشارَك — يعمل دون اتصال بالإنترنت وهو آمن للـ payloads السرية وواجهات API الداخلية وبيانات الإنتاج. ضع إشارة مرجعية على هذا محوّل JSON إلى TypeScript واستخدمه في أي وقت تحتاج فيه إلى أنواع بسرعة.

يقبل المحلل المتساهل حتى مدخلات شبيهة بـ JSON مع // تعليقات وفواصل لاحقة وسلاسل بعلامات اقتباس مفردة، لذا يمكنك لصق كائن JavaScript حرفي من محررك والحصول على إخراج صالح. لا خطوة إضافية مطلوبة.

Frequently asked questions

كيف أحوّل JSON إلى TypeScript؟

الصق JSON في لوحة الإدخال (أو اضغط على نموذج لتحميل مثال) وسيظهر TypeScript المطابق فوراً في لوحة الإخراج. على سبيل المثال، يصبح {"id": 1, "name": "Ahmad"} هو export interface Root { id: number; name: string; }. انقر على نسخ أو تنزيل .ts لإضافة الأنواع مباشرةً إلى مشروعك.

كيف أُنشئ واجهة TypeScript من JSON؟

اترك الإخراج مضبوطاً على Interface (الافتراضي) وسيصبح كل كائن JSON واجهة export interface خاصة به. اضبط حقل اسم الجذر للتحكم في اسم المستوى الأعلى. الكائنات المتداخلة تتحول تلقائياً إلى واجهات مُسمّاة خاصة بها.

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

كلاهما يصف شكل الكائن نفسه — اختر ما يُفضّله كودبيس باستخدام مُبدّل Interface / Type / Class. وضع Interface يُصدر export interface Root { … } الذي يمكن إعادة فتحه وتوسيعه بدمج الإعلانات؛ ووضع Type يُصدر export type Root = { … } الذي يمكنه أيضاً التعبير عن الاتحادات والأنواع الأولية؛ ووضع Class يُصدر export class Root { … } بحقول مُعلَنة.

كيف أتعامل مع الحقول الاختيارية أو الفارغة (? / | null)؟

مُبدّلان يتحكمان في ذلك. 'اختياري (?) للمفاتيح المفقودة' يُوسم أي خاصية غائبة في بعض عناصر مصفوفة الكائنات باختيارية. 'null → اختياري' يُعيد كتابة حقل قابل للفراغ مثل zip: string | null إلى zip?: string؛ أوقفه للاحتفاظ بالاتحاد الصريح | null. اجمعهما لمطابقة أسلوب فريقك في التعامل مع الفراغ.

هل من الآمن لصق JSON هنا؟

نعم. التحويل 100% من جانب العميل: يتم تحليل JSON وتحويله إلى TypeScript بواسطة JavaScript تعمل في تبويب المتصفح الخاص بك، ولا يُرفع أبداً ولا يُسجَّل ولا يُرسَل إلى أي خادم. يمكنك قطع الاتصال بالإنترنت وتستمر الأداة في العمل.

كيف يعمل اكتشاف تعدادات السلاسل؟

فعّل 'اكتشاف تعدادات السلاسل' وسيتم استنتاج عمود من السلاسل المتكررة مثل 'مُشحون' و'قيد الانتظار' كاتحاد حرفي "قيد الانتظار" | "مُشحون" بدلاً من string بسيط. هذا يجعل الأنواع المولّدة أكثر دقةً وفائدة.

هل يمكنني توليد أنواع من استجابة API أو Swagger؟

نعم — الصق استجابة JSON حقيقية من API الخاص بك وستستنتج الأداة واجهات جاهزة للاستخدام يمكنك توصيلها مباشرةً في استدعاءات fetch أو axios للإكمال التلقائي وأمان الأنواع. لنقطة نهاية Swagger/OpenAPI، انسخ نص استجابة مثال (JSON وليس وثيقة المخطط) وحوّله.