معالجة JSON في TypeScript: دليل شامل مع أمثلة

معالجة JSON في TypeScript: من العمليات الأساسية إلى التصنيف المتقدم

JSON (JavaScript Object Notation) يظل التنسيق الأساسي لتبادل البيانات في تطوير الويب. TypeScript، كونه مجموعة شاملة من JavaScript ذات تصنيف صارم، يوفر أدوات قوية للعمل الآمن والفعال مع JSON. في هذه المقالة، سنغطي جميع جوانب معالجة JSON في TypeScript: من التحليل البسيط إلى التحقق المعقد باستخدام الأدوية (Generics) والمكتبات الخارجية.

1. العمليات الأساسية: التحليل والتسلسل

يرث TypeScript بالكامل الطرق المضمنة في JavaScript للعمل مع JSON: JSON.parse() و JSON.stringify(). ومع ذلك، فإن استخدامها في TypeScript يتطلب اهتمامًا خاصًا بالأنواع.

تحليل سلسلة JSON

// تحليل بسيط — النتيجة من نوع anyconst rawData = JSON.parse('{"name": "Alice", "age": 30}');// rawData من نوع any — نفقد جميع مزايا TypeScript

// النهج الصحيح: تحديد النوع المتوقع باستخدام الأدوية (Generic)interface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}');// user الآن مصنف، لكن TypeScript لا يتحقق من التطابق في وقت التنفيذ

هام: JSON.parse() لا يتحقق مما إذا كانت السلسلة المُمررة تتوافق مع الواجهة المحددة. قد يؤدي ذلك إلى أخطاء أثناء وقت التنفيذ. للتحقق الموثوق، استخدم أدوات إضافية.

تسلسل الكائنات إلى JSON

const user: User = { name: "Bob", age: 25 };const jsonString = JSON.stringify(user);// النتيجة: '{"name":"Bob","age":25}'

// تسلسل مخصص باستخدام replacerconst filteredJson = JSON.stringify(user, ['name']);// النتيجة: '{"name":"Bob"}'

// تنسيق مع مسافات بادئةconst prettyJson = JSON.stringify(user, null, 2);/* النتيجة:{  "name": "Bob",  "age": 25}*/

2. تصنيف بيانات JSON: الواجهات والأنواع

التصنيف الصحيح هو الميزة الرئيسية لـ TypeScript عند العمل مع JSON. دعنا نستعرض الأساليب الأساسية.

واجهات لهياكل البيانات

interface ApiResponse<T> {  status: 'success' | 'error';  data: T;  message?: string;  timestamp: number;}

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

// استخدام الأدوية (Generic) لتصنيف استجابة APItype ProductResponse = ApiResponse<Product>;

const response: ProductResponse = {  status: 'success',  data: {    id: 'prod-123',    title: 'Wireless Mouse',    price: 29.99,    tags: ['electronics', 'accessories'],    inStock: true  },  timestamp: Date.now()};

أنواع لهياكل JSON الديناميكية

// للكائنات ذات المفاتيح غير المعروفةtype DynamicObject = Record<string, unknown>;

// للقواميس المصنفة بشكل صارمinterface Config {  [key: string]: string | number | boolean;}

// أنواع الاتحاد (Union types) لـ JSON متعدد الأشكالtype Shape =   | { kind: 'circle'; radius: number }  | { kind: 'rectangle'; width: number; height: number }  | { kind: 'triangle'; base: number; height: number };

function calculateArea(shape: Shape): number {  switch (shape.kind) {    case 'circle': return Math.PI * shape.radius ** 2;    case 'rectangle': return shape.width * shape.height;    case 'triangle': return (shape.base * shape.height) / 2;  }}

3. التحقق من صحة بيانات JSON: فحوصات وقت التنفيذ

يتحقق TypeScript من الأنواع فقط في وقت الترجمة. للتحقق من صحة بيانات JSON في وقت التنفيذ (مثلاً، من API خارجي)، استخدم مكتبات متخصصة.

استخدام Zod للتحقق التصريحي

import { z } from 'zod';

// تعريف المخططconst UserSchema = z.object({  name: z.string().min(2).max(50),  age: z.number().int().positive().max(120),  email: z