كيفية إنشاء أنواع TypeScript من JSON
- الصق مثال JSON. كلما زاد عدد العناصر في مصفوفاته، كان اكتشاف الحقول الاختيارية وأنواع union أدق.
- حدّد اسم النوع الجذر واختر
interfaceأوtype، معexportوreadonlyأو بدونهما. - انسخ كود TypeScript إلى مشروعك أو نزّله كملف
.ts.
كيف تُستنتج أنواع TypeScript من JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42، 3.14 | number |
true | boolean |
null إلى جانب قيم أخرى | نوع union مثل string | null |
"address": {"city": "Paris"} | واجهة مستقلة interface Address |
"users": [{"id": 1}] | User[] – يُحوَّل اسم العنصر إلى صيغة المفرد |
| مفتاح مفقود في بعض عناصر المصفوفة | خاصية اختيارية key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
مثال
يتحول JSON التالي {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} إلى:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
أعد تسمية Root باسم ذي معنى مثل User أو ApiResponse. تتشارك الكائنات المتداخلة ذات البنية المتطابقة تمامًا – كعنوان الفوترة وعنوان الشحن مثلًا – واجهة واحدة، وتُحاط المفاتيح التي ليست معرّفات صالحة بعلامات اقتباس، مثل "first-name": string.
الأسئلة الشائعة
interface أم type – أيهما أختار؟
في وصف بنية الكائنات يتصرف الاثنان بالطريقة نفسها. يمكن توسيع الواجهات (interface) ودمجها، بينما تستطيع الأسماء المستعارة للأنواع (type) وصف أنواع union أيضًا. تستخدم فرق كثيرة interface للكائنات؛ فاتبع الأسلوب المعتمد في مشروعك.
كيف تُكتشف الحقول الاختيارية؟
تُدمج الكائنات الموجودة داخل المصفوفة نفسها. المفتاح المفقود في بعضها يصبح اختياريًا (key?:)، والمفتاح الذي تختلف أنواع قيمه يصبح من نوع union.
هل يتحقق هذا من البيانات أثناء التشغيل؟
لا. تختفي أنواع TypeScript عند تشغيل الكود. للتحقق من البيانات الواردة، أنشئ JSON Schema من المثال نفسه باستخدام مولد JSON Schema لدينا، ثم تحقق منها مقابله بمكتبة مخططات.
هل يُرسل JSON الخاص بي إلى خادم؟
لا. تُنشأ الأنواع في متصفحك، لذا يمكنك لصق استجابات API الخاصة بأمان.