מפתחים שמגיעים ל-typescript משפות כמו c# או java מוצאים את השימוש ב-enum נח ופשוט.
אבל enum הוא פיצ׳ר שונה משאר הפיצ׳רים של typescript הוא ממש יוצר קוד.
כך בלי להתכוון אנחנו כותבים פיצ׳רים שמגיעים משפה שהיא כבר לא js, אבל בפועל הקוד שרץ בדפדפן הוא קוד js.
זה לא טוב. אנחנו תמיד נעדיף לכתוב קוד שנראה כמו שהוא עובד בלי להסתיר מנגנונים מתחתיו.
אז מה קורה ב-enum ואיך נחליף אותו?
נניח שיש לנו קוד שכתוב ב-javascript:
function getDeviceOS() {
if (/android/i.test(navigator.userAgent)) {
return 'android';
}
return 'ios';
}
if (getDeviceOs() === 'android') {
console.log('android logic');
}
כשנעבור ל-typescript נרצה להוסיף לקוד types. עם enum זה יראה ככה:
enum DeviceOs {
ios,
android
}
function getDeviceOS(): DeviceOs {
if (/android/i.test(navigator.userAgent)) {
return DeviceOs.android;
}
return DeviceOs.ios;
}
if (getDeviceOs() === DeviceOs.android) {
console.log('android logic');
}
מה בעצם קורה פה? ה-enum הופך בדפדפן לאובייקט פשוט:
const DeviceOs = {0: 'ios', 1: 'android', ios: 0, android: 1}
function getDeviceOS() {
if (/android/i.test(navigator.userAgent)) {
return DeviceOs.android;
}
return DeviceOs.ios;
}
if (getDeviceOs() === DeviceOs.android) {
console.log('android logic');
}
אנחנו רואים שבניגוד ל-type, ה-enum הופך לקוד שממש רץ בדפדפן.
אבל למה בעצם זה טוב לנו? אין לנו עניין בקוד שירוץ בדפדפן, אלא ב-static code check שיקל עלינו את כתיבת הקוד וימנע מאיתנו לטעות!
הקוד הבא יעשה את אותה פעולה בלי צורך לשנות את הקוד הראשוני שלנו:
type DeviceOs = 'android' | 'ios'
function getDeviceOS(): DeviceOs {
if (/android/i.test(navigator.userAgent)) {
return 'android';
}
return 'ios';
}
if (getDeviceOS() === 'android') {
console.log('android logic');
}
הקוד הזה מספיק בשביל שה-ide ייתן לנו השלמה אוטומטית ויתריע לנו אם נשתמש ב-string שלא מתאים ל-type. זה בעצם כל מה שרצינו!
Discussion (0)