פונקציות ב-TypeScript

מאמר זה מסביר על פונקציות ב-TypeScript.

YouTube Video

פונקציות ב-TypeScript

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

הגדרה בסיסית של פונקציה

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• הפונקציה add מקבלת שני ארגומנטים מסוג number ומחזירה ערך מסוג number.
• היא מקבלת שני ארגומנטים, x ו- y, שניהם מסוג number, כאשר הסוג שלהם מצוין במפורש.
• סוג הערך המוחזר מצוין גם הוא כ- : number.

פונקציות אנונימיות (ביטויי פונקציה)

ניתן להשתמש בפונקציות אנונימיות ובביטויי פונקציה גם ב-TypeScript. ניתן להוסיף סימוני סוגים באותו האופן.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• ניתן לשייך פונקציה אנונימית למשתנה ולהפעיל אותה מאוחר יותר.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• ניתן להשתמש בביטוי פונקציה עם שם כדי לאפשר קריאות רקורסיביות.

פונקציות חץ

ניתן להשתמש בסימוני סוגים גם עם פונקציות חץ.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

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

פרמטרים אופציונליים וברירת מחדל

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

פרמטרים אופציונליים

הוספת ? לאחר שם הפרמטר הופכת אותו לאופציונלי.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

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

פרמטרים עם ערכי ברירת מחדל

ניתן גם להגדיר ערכי ברירת מחדל לפרמטרים.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

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

הגדרת סוג הפונקציה

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

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

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

כאשר אין ערך מוחזר (סוג void)

עבור פונקציות ללא ערך מוחזר, ציין את הסוג void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

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

פונקציית קולבק

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

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

בדוגמה זו, פונקציה שמדפיסה ערך לקונסול מועברת כפונקציית קולבק.

לחילופין, ניתן להגדיר טיפוס של קולבק באמצעות type או interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

הגדרת טיפוס של קולבק באמצעות type או interface משפרת את אפשרות השימוש החוזר.

העמסת פונקציות

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

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

ב-TypeScript, העמסה מושגת באופן הבא:.

• חתימת העמסה

  • מגדירה כיצד ניתן להשתמש בפונקציה (החתימה שלה). על ידי כתיבה זו מספר פעמים, ניתן לבצע העמסה.

• חתימת מימוש

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

כללים להעמסה

הכללים הבאים חלים על העמסת פונקציות:.

• סדר הגדרת חתימות ההעמסה

  • מכיוון שהערכה מתבצעת מלמעלה למטה, מומלץ להגדיר תחילה סוגים ספציפיים ולאחר מכן סוגים כלליים יותר.

• התאמת חתימת המימוש

  • על חתימת המימוש להיות תואמת לארגומנטים ולערכי ההחזרה של כל חתימות העומס.

• ציין פרטים בחתימות העומס

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

סיכום

לפונקציות ב-TypeScript יש את המאפיינים הבאים.

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

באמצעות שימוש בזה, ניתן לכתוב קוד ברור וחזק יותר ב-TypeScript.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video