TypeScript type inference: מתי לכתוב טיפוס ומתי לא

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

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

ההערות מראות מה עורך הקוד מציג כשמרחפים מעל כל שם. השורה האחרונה היא שגיאת קומפילציה (TS2322) למרות שאף פעם לא נכתב טיפוס ל-count; // @ts-expect-error מסמן אותה כצפויה, כך ששאר הבלוק רץ.

let מול const: הרחבה של ליטרלים

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

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

זה חשוב כשפונקציה מקבלת רק ערכים מסוימים:

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

תקנו עם const, או עם הערת טיפוס על המשתנה: let dir: "left" | "right" = "left". לטיפוסים ליטרליים יש עמוד משלהם, literal types.

אובייקטים ומערכים מרחיבים את האיברים שלהם

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

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

הסקת טיפוס ההחזרה

טיפוס ההחזרה של פונקציה מוסק מפקודות ה-return שלה. כשיש כמה, התוצאה היא ה-union שלהן.

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

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

Contextual typing: callbacks מקבלים את הטיפוסים שלהם

פרמטרים לא מוסקים מהאופן שבו קוראים לפונקציה. יש שני חריגים. פרמטר עם ערך ברירת מחדל מקבל את הטיפוס של ברירת המחדל (function retry(times = 3) הופך את times ל-number). ופונקציה שנכתבת במקום שבו כבר מצופה טיפוס של פונקציה מקבלת את טיפוסי הפרמטרים שלה מההקשר הזה, ולכן פרמטרים של callbacks לא צריכים הערת טיפוס.

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

אותו דבר חל על forEach, filter, reduce, callbacks של Promise, מטפלי אירועים וכל פונקציה שמעבירים לפרמטר עם טיפוס פונקציה מוצהר.

פרמטרים צריכים הערות טיפוס

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

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

כתבו function double(x: number) והבלוק ידפיס 42, עם טיפוס ההחזרה number שמוסק מ-x * 2.

Best common type

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

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

מערך ריק הוא המקרה היחיד שצריך לשים לב אליו. const list = [] מתחיל כמערך "מתפתח" שהטיפוס שלו גדל עם כל push; הערת טיפוס, const list: string[] = [], מצהירה על הכוונה מראש וברורה יותר.

מתי לכתוב טיפוס

הדרך המהירה ביותר לראות מה הוסק היא לרחף מעל השם בעורך. בלי עורך, השימו את הערך למשתנה מטיפוס שגוי, כמו const probe: boolean = mixed;, והודעת השגיאה של הקומפיילר תציין את הטיפוס שהוסק.