العمل مع JSON في TypeScript: التحليل والتسلسل للمبتدئين

مقدمة: لماذا يعتبر JSON و TypeScript ثنائياً مثالياً

JSON (JavaScript Object Notation) هو تنسيق خفيف لتبادل البيانات أصبح المعيار الفعلي لتطبيقات الويب. أما TypeScript، فيضيف كتابة ثابتة (static typing) إلى JavaScript، مما يجعل العمل مع البيانات أكثر أماناً وقابلية للتنبؤ. بالنسبة للمطورين المبتدئين، فإن فهم كيفية تحليل (تحويل سلسلة نصية إلى كائن) وتسلسل (تحويل كائن إلى سلسلة نصية) JSON في TypeScript هو مهارة أساسية.

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

أساسيات تحليل JSON في TypeScript

تحليل JSON هو عملية تحويل سلسلة نصية بتنسيق JSON إلى كائن TypeScript. الأداة الرئيسية لذلك هي الدالة العامة JSON.parse(). ومع ذلك، هناك تفاصيل دقيقة في TypeScript تتعلق بتحديد الأنواع.

تحليل سلسلة JSON أساسية

لنأخذ مثالاً بسيطاً: لدينا سلسلة JSON تمثل مستخدماً.

const jsonString = '{"name": "آنا", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString);console.log(user.name); // "آنا"console.log(user.age);  // 28

المشكلة هي أن TypeScript لا يعرف بنية الكائن user. بشكل افتراضي، تُرجع JSON.parse() النوع any، مما يلغي مزايا الكتابة الثابتة.

تحديد نوع نتيجة التحليل

لإصلاح ذلك، يمكننا تحديد نوع القيمة المُرجعة بشكل صريح. أبسط طريقة هي استخدام تأكيد النوع (type assertion).

interface User {    name: string;    age: number;    isStudent: boolean;}

const jsonString = '{"name": "آنا", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString) as User;console.log(user.name); // TypeScript يعلم أن name هو string

الآن يفهم TypeScript بنية الكائن ويمكنه التحقق من أنواع الخصائص عند الوصول إليها.

تسلسل الكائنات إلى JSON في TypeScript

التسلسل هو العملية العكسية: تحويل كائن TypeScript إلى سلسلة JSON. لهذا نستخدم الدالة JSON.stringify().

مثال أساسي للتسلسل

interface Product {    id: number;    title: string;    price: number;    inStock: boolean;}

const product: Product = {    id: 101,    title: "حاسوب محمول",    price: 54999.99,    inStock: true};

const jsonString = JSON.stringify(product);console.log(jsonString);// {"id":101,"title":"حاسوب محمول","price":54999.99,"inStock":true}

تقوم الدالة JSON.stringify() تلقائياً بتحويل الكائن إلى سلسلة JSON. من المهم تذكر أنه لا يمكن تسلسل جميع القيم: الدوال، undefined، Symbol — سيتم تخطيها أو استبدالها بـ null.

تخصيص التسلسل باستخدام replacer

أحياناً نحتاج للتحكم في الحقول التي ستظهر في السلسلة النهائية. لهذا، تقبل JSON.stringify() وسيطاً ثانياً — دالة replacer أو مصفوفة من المفاتيح.

const product = {    id: 101,    title: "حاسوب محمول",    price: 54999.99,    discount: 10,    secretCode: "SECRET123"};

// استبعاد البيانات السريةconst safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // تخطي هذا الحقل    }    return value;});console.log(safeJson);// {"id":101,"title":"حاسوب محمول","price":54999.99,"discount":10}

تقنيات متقدمة: العمل مع الكائنات المتداخلة والمصفوفات

في التطبيقات الواقعية، نادراً ما يكون JSON مسطحاً. غالباً ما نواجه كائنات متداخلة، مصفوفات، وهياكل بيانات معقدة. يساعد TypeScript في إدارة هذا التعقيد باستخدام الواجهات (interfaces).