גנרי TypeScript עם דוגמאות

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

הבנת גנריות

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

תחביר בסיסי

התחביר הבסיסי להגדרת טיפוס גנרי הוא להשתמש בסוגריים של זווית <> עם שם פרמטר טיפוס. הנה דוגמה פשוטה:

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

בדוגמה זו, identity היא פונקציה גנרית שלוקחת פרמטר value מסוג T ומחזירה ערך מאותו סוג. פרמטר הסוג T מוחלף בסוג האמיתי כאשר הפונקציה נקראת.

גנריות עם שיעורים

ניתן להשתמש בגנריות גם עם מחלקות ליצירת מבני נתונים גמישים וניתנים לשימוש חוזר. הנה דוגמה למחלקה גנרית:

class Box {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

בדוגמה זו, המחלקה Box מוגדרת עם פרמטר טיפוס גנרי T. למחלקה יש מאפיין פרטי value מסוג T ושיטה getValue שמחזירה את הערך של הסוג T.

גנריות עם ממשקים

ניתן להשתמש בגנריות עם ממשקים ליצירת ממשקים גמישים ובטוחים לסוג. הנה דוגמה:

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

בדוגמה זו, ממשק Pair מוגדר עם שני פרמטרים כלליים מסוג T ו-U. הממשק מייצג זוג ערכים עם סוגי T ו-U, בהתאמה.

גנריות בפונקציות

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

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

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

אילוצים על גנריות

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

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

בדוגמה זו, הפונקציה logLength מוגבלת לסוגים בעלי מאפיין length. זה מאפשר לפונקציה לקבל מחרוזות ומערכים אך לא מספרים או סוגים אחרים ללא מאפיין length.

מַסְקָנָה

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

נסה עם גנריות בפרויקטים שלך כדי לראות את היתרונות שלהם בפעולה ולשפר את כישורי התכנות שלך ב-TypeScript.