Ts loop through object properties

אם תנסו לרוץ על המפתחות של אוביקט ואז למשוך נתון על פי המפתח ב-typescript תקבלו שגיאה.

הסיבה הפשוטה היא שמדובר על בעיה ב-type, כאשר עושים לולאה כמו שמיד נראה אז מקבלים את ה-KEY כ-STRING.

אבל אנחנו ב-typescript , זה אומר שמבחינת הקומפיילר אין בעיה שזה string אבל זה יכול להיות רק מהסוג property של האוביקט.

כל עוד זה string מבחינתו זה יכול להיות כל דבר ולכן אנחנו צריכים "להרגיע" אותו.

מיד נראה איך נראה המצב הבעיתי ואיך לתקן אותו

.....

interface IHome {
  roof: string;
  door: string;
  windows: string;
}

 home: IHome = {
    roof: 'red',
    door: 'blue',
    windows: 'green'
 }

onHome() {
    for (let colorKey in this.home) {
      console.log(colorKey);
      console.log(this.home[colorKey]);

    }
}

יש לנו אינטרפייס, יש לנו השמה של HOME ויש לנו את הפונקציה שעושה לולאה על האוביקט HOME.

שורה 17 תדפיס את ה-KEY ובעקרון אם יש לי את המפתח אני אמור להיות יכול לקרוא לאוביקט ובסוגריים מרובעים למשוך ממנו את המאפיין הספציפי שאני רוצה, אבל כאן אנחנו נקבל שגיאה שנראת כך:

let colorKey: string
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IHome'.
  No index signature with a parameter of type 'string' was found on type 'IHome'.ts(7053)

אנחנו צריכים להבטיח לו שיכול להיות במשתנה הזה רק מידע מהסוג של האוביקט ונפתור את זה כך

 onHome() {
    let colorKey: keyof IHome;
    for (colorKey in this.home) {
      console.log(colorKey);
      console.log(this.home[colorKey]);
    }
  }

כך אנחנו מבטיחים שהמשתנה colorKey יכול להיות רק מהמאפיינים של IHome.

אם נניח ננסה לשנות בדרך את הערך שלו, נקבל שגיאה בגלל שזה כבר לא תואם את הסוג שהוגדר לו.

 onHome() {
    let colorKey: keyof IHome;
    for (colorKey in this.home) {
      console.log(colorKey);
      colorKey = colorKey + 'a';
      console.log(this.home[colorKey]);

    }
  }

תיהנו 🎃

פוסטים קשורים:

for loop of | איטרציה למערכים ב javascript. עם אינדקס angular input and output in the same variable SEO| שינוי כותרת של הדף באנגולר Chat – angular, nodejs and socket.io