סוג שומרים

צמצום סוג הוא אחד המושגים החשובים ביותר ב-TypeScript. עם זאת, לעתים קרובות, מגנים מסוג סטנדרטי כמו typeof או instanceof אינם מספיקים עבור אובייקטים מותאמים אישית מורכבים. כאן נכנסים לתמונה מגני סוג מותאם אישית.

מגנים מסוג סטנדרטי

נתחיל בסיכום כיצד TypeScript מצמצם סוגים באמצעות אופרטורים סטנדרטיים של JavaScript:

function processInput(val: string | number) {
  if (typeof val === 'string') {
    // Here 'val' is of type string
    console.log(val.toUpperCase());
  } else {
    // Here 'val' is of type number
    console.log(val.toFixed(2));
  }
}

מגנים מסוג מותאם אישית (מפעיל is)

כדי להגדיר משמר סוג מותאם אישית, אנו יוצרים פונקציה שמחזירה פרדיקט סוג בפורמט parameterName is Type במקום סוג החזרה בוליאני סטנדרטי.

הפונקציה חייבת להחזיר ערך בוליאני (true או false). אם הוא מחזיר את true, TypeScript יידע שהפרמטר שעבר הוא מהסוג שצוין.

interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

// This is a custom type guard
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeNoise(pet: Cat | Dog) {
  if (isCat(pet)) {
    // Here TypeScript knows 'pet' is a Cat
    pet.meow();
  } else {
    // Here TypeScript knows 'pet' is a Dog
    pet.bark();
  }
}

בטיחות והטלה (as לעומת מגני סוג)

יציקת סוגים (לדוגמה, val as Cat) מאלצת את המהדר לסמוך על המפתח ללא כל אימות בזמן ריצה אמיתי. אם אובייקט זמן הריצה לא יעמוד בציפיות, הקוד ייכשל בשקט או יזרוק חריגים.

מאבטחים מסוג מותאם אישית, לעומת זאת, מבצעים בדיקת זמן ריצה חזקה ודינמית, ומודיעים בצורה בטוחה ומדויקת למהדר TypeScript על סוג המשתנה בפועל:

function processInput(input: unknown) {
  // unsafe casting: could crash if input does not have the split method
  // const str = input as string;
  // console.log(str.split(' '));

  // safe guard
  if (isString(input)) {
    console.log(input.split(' ')); // 100% Safe!
  }
}

נסה זאת בעצמך

תרגיל 1: שומר סוג מיתר

תרגיל 2: Premium User Type Guard

תרגיל 3: אימות אובייקט שגיאה מותאם אישית

תרגיל 4: Admin Type Guard