היום למדתי: בחירת טיפוס ממערך ב TypeScript
23/01/2022
הנה טריק TypeScript מדליק שיעזור לכם להוסיף בדיקת טיפוסים כשיש לכם ביד מערך קבוע ופונקציה שצריכה לקבל ערך מתוך אותו מערך. בדוגמה (מתוך הפוסט שלימד אותי את זה) היה לנו:
const animals = [
{ id: 1, name: 'cat' },
{ id: 2, name: 'dog' },
{ id: 3, name: 'mouse' },
];
type AnimalName = 'cat' | 'dog' | 'mouse'
function getAnimal(name: AnimalName) {
return animals.find(a => a.name === name)
}
עכשיו אנחנו יכולים להפעיל:
console.log(getAnimal('dog'));
ולקבל את התוצאה בלי בעיה, אבל אם ננסה להפעיל:
console.log(getAnimal('bird'));
נקבל כשלון בזמן הבניה כי אין חיה כזאת במערך.
עכשיו זה מעולה אבל השורה הזאת:
type AnimalName = 'cat' | 'dog' | 'mouse'
מרגישה מיותרת - הרי כבר יש לי את המערך, למה אני צריך לחזור על השמות של כל החיות רק בשביל להגדיר טיפוס?
מסתבר שגם במייקרוסופט הבינו שהיא מיותרת ול TypeScript יש תחביר ממש פשוט שמאפשר לוותר עליה. הקוד הבא שקול לגמרי לגירסה הראשונה ולא כולל את הכפילות:
const animals = [
{ id: 1, name: 'cat' },
{ id: 2, name: 'dog' },
{ id: 3, name: 'mouse' },
] as const;
type AnimalName = typeof animals[number]['name'];
function getAnimal(name: AnimalName) {
return animals.find(a => a.name === name)
}
console.log(getAnimal('dog'));
רק אל תשכחו להוסיף אחרי הגדרת המערך את המילים as const אחרת TypeScript יגדיר את AnimalName להיות פשוט string ולא יזרוק שום שגיאה.