DDoS Community

EladHeller
EladHeller

Posted on

איך להחליף enum ב-typescript

מפתחים שמגיעים ל-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');
}
Enter fullscreen mode Exit fullscreen mode

כשנעבור ל-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');
}

Enter fullscreen mode Exit fullscreen mode

מה בעצם קורה פה? ה-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');
}

Enter fullscreen mode Exit fullscreen mode

אנחנו רואים שבניגוד ל-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');
}
Enter fullscreen mode Exit fullscreen mode

הקוד הזה מספיק בשביל שה-ide ייתן לנו השלמה אוטומטית ויתריע לנו אם נשתמש ב-string שלא מתאים ל-type. זה בעצם כל מה שרצינו!
Image description

Discussion (0)