אישורי טיפוסים

חלק מהיחידה מבוא ל-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;

אתגר

קל

צרו פונקציה שמעבדת נתונים מסימולציה של 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));