تأكيدات النوع

جزء من قسم مقدمة إلى TypeScript في رحلة JavaScript على Coddy. الدرس 68 من 73.

أحيانًا لا يملك TypeScript معلومات كافية لتحديد النوع الدقيق لقيمة ما، لكنك أنت كمطوّر تعرف المزيد عن ماهية هذه القيمة فعليًا. تتيح لك تأكيدات النوع أن تخبر TypeScript: "ثق بي، أنا أعرف أن هذه القيمة من هذا النوع المحدد."

يوفّر TypeScript صيغتين لتأكيدات الأنواع. تُعدّ صيغة as النهج الأكثر شيوعًا:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

يمكنك أيضًا استخدام صيغة الأقواس الزاوية، رغم أنها أقل شيوعًا في TypeScript الحديثة:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

التحدي

سهل

أنشئ function لمعالجة البيانات من محاكاة API خارجية. ستعمل مع قيم من النوع unknown وتستخدم تأكيدات النوع للوصول بأمان إلى خصائصها.

أنشئ متغيرًا apiResponse من النوع unknown وأسند إليه سلسلة JSON التالية:

{"userId": 42, "username": "alice_dev", "isActive": true}

أنشئ function باسم processUserData التي:

تأخذ مَعلمة data من النوع unknown
تستخدم تأكيد نوع للتعامل مع data باعتبارها string
تحلل سلسلة JSON باستخدام JSON.parse()
تستخدم تأكيد نوع آخر للتعامل مع النتيجة المحللة باعتبارها كائنًا يحتوي على الخصائص userId (من النوع number)، وusername (من النوع string)، وisActive (من النوع boolean)
تعيد سلسلة منسقة: "User [userId]: [username] (Active: [isActive])"
لها نوع إرجاع صريح هو string

أنشئ بيانات اختبار إضافية:

أنشئ secondApiResponse من النوع unknown مع سلسلة JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
أنشئ thirdApiResponse من النوع unknown مع سلسلة JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

اختبر function واطبع المخرجات التالية:

استدعِ processUserData باستخدام apiResponse واطبع النتيجة
استدعِ processUserData باستخدام secondApiResponse واطبع النتيجة
استدعِ processUserData باستخدام thirdApiResponse واطبع النتيجة

جرّب بنفسك

// أنشئ متغيرات استجابة الـ API
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: أنشئ دالة processUserData هنا

// اختبر الدالة واطبع النتائج
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));