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

جزء من قسم مقدمة إلى 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;

ينطبق الأمر نفسه على الكائنات. عندما تصل قيمة على هيئة unknown، يمكنك تأكيد البنية التي تتوقعها، ثم قراءة خصائصها:

let payload: unknown = { name: "John", age: 30 };
let user = payload as { name: string; age: number };
console.log(user.name);

لا يغيّر التأكيد إلا ما يعتقده TypeScript بشأن القيمة. فهو لا يحوّل أي شيء أثناء وقت التشغيل، لذا أكّد شكلًا ما فقط عندما تعلم أن القيمة تمتلكه فعلًا.

التحدي

سهل

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

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

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

أنشئ دالة باسم 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}

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

استدعِ 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));