TypeScript Function Type: תחביר חץ וטיפוסי callback

טיפוס פונקציה מתאר את הפרמטרים ואת ערך ההחזרה של פונקציה, ונכתב עם חץ: (a: number, b: number) => number. תנו לו שם עם type, ותוכלו להשתמש בו למשתנים, לפרמטרים ולמאפיינים של אובייקטים.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

הפונקציה שמושמת ל-add לא צריכה הערות טיפוס: טיפוסי הפרמטרים שלה מגיעים מ-Operation. זה נקרא contextual typing, וזו הסיבה העיקרית לתת שמות לטיפוסי פונקציות.

התחביר של טיפוס פונקציה

הצורה היא (parameters) => ReturnType. כל פרמטר צריך שם וטיפוס. השמות נמצאים שם בשביל הקריאות והרמזים בעורך; כל פונקציה עם טיפוסי פרמטרים תואמים מתאימה, לא משנה איך היא קוראת להם.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

השם אינו אופציונלי. (string) => void מצהיר על פרמטר בשם string בלי טיפוס, ומצב strict דוחה אותו עם TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. כתבו (value: string) => void.

טיפוסים לפונקציות חץ

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

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

צורה 1 היא הבחירה הרגילה לפונקציה עצמאית. צורה 3 משתלמת כשכמה פונקציות חולקות חתימה אחת (handlers, פונקציות השוואה, פונקציות המרה), כי החתימה נכתבת פעם אחת ושינוי בה נבדק בכל מקום.

טיפוסי callback

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

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

שני כללים הופכים callbacks לנוחים לשימוש:

• פחות פרמטרים זה בסדר. אפשר להעביר פונקציה שמקבלת פרמטר אחד במקום שבו מוצעים שניים. JavaScript מתעלם מארגומנטים עודפים, ולכן TypeScript מאפשר את זה. יותר פרמטרים ממה שהטיפוס מציע זו שגיאה (Target signature provides too few arguments.).
• החזרה מסוג void מקבלת כל דבר. callback מהטיפוס (...) => void יכול להחזיר ערך; מי שקורא לו מתחייב לא להשתמש בו. זו הסיבה ש-list.forEach((x) => other.push(x)) מתקמפל, למרות ש-push מחזיר מספר.

טיפוסי הפרמטרים עדיין חייבים להיות תואמים. העברה של (x: string) => ... במקום שבו מצופה (a: number, b: number) => number נכשלת עם Types of parameters 'x' and 'a' are incompatible.

חתימות קריאה

(n: number) => string הוא קיצור לטיפוס אובייקט עם חתימת קריאה: { (n: number): string }. צריך את הצורה הארוכה כשלפונקציה יש גם מאפיינים.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript מאפשר להוסיף מאפיינים לפונקציה שהוצהרה עם const באותו scope, ועוקב אחריהם בטיפוס של הפונקציה. גם interface יכול להכיל חתימת קריאה: interface Counter { (): number; count: number }.

חתימת בנייה (construct signature) מתארת משהו שקוראים לו עם new. היא מוסיפה new בהתחלה: new (name: string) => User, או { new (name: string): User } בצורת אובייקט. כך נותנים טיפוס לפרמטר שמקבל מחלקה.

תחביר מתודה מול תחביר מאפיין

בטיפוס אובייקט, אפשר לכתוב איבר שהוא פונקציה כמתודה, handle(value: string): void, או כמאפיין שמחזיק פונקציה, handle: (value: string) => void. הם נראים זהים, אבל תחת strict הם נבדקים אחרת:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

הקומפיילר מדווח:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

השגיאה צודקת: onlyStrings לא יודעת לטפל במספר. צורת המתודה מעבירה את אותה טעות (פרמטרים של מתודות נבדקים "bivariantly" מסיבות היסטוריות), ו-a.handle(42) הייתה קורסת בזמן ריצה עם TypeError: value.toUpperCase is not a function. מחקו את השורה של b כדי לראות את הקריסה. כשאתם כותבים טיפוסי אובייקט משלכם, צורת המאפיין תופסת יותר טעויות.

הימנעו מהטיפוס Function

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

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

החליפו את Function בחתימה האמיתית. כשבאמת מקבלים כל פונקציה (debounce גנרי, עטיפה ללוגים), (...args: never[]) => unknown מקבל כל פונקציה ועדיין שומר את התוצאה כ-unknown במקום any. לפונקציות שהטיפוסים שלהן תלויים בקלט, ראו generics: טיפוס של פונקציה גנרית נראה כמו <T>(value: T) => T.