Type inference in TypeScript: quando annotare e quando no

La type inference è TypeScript che ricava un tipo che non hai scritto. Inizializza una variabile e prende il tipo del valore; restituisci un valore da una funzione e il tipo di ritorno segue. La maggior parte del codice TypeScript contiene molte meno annotazioni di quanto si pensi.

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";

I commenti mostrano ciò che un editor visualizza quando passi il mouse su ogni nome. L'ultima riga è un errore di compilazione (TS2322) anche se count non è mai stato annotato; // @ts-expect-error la segna come attesa, così il resto del blocco viene eseguito.

let e const: allargamento dei letterali

Una const non può mai cambiare, quindi TypeScript le dà il tipo più stretto: il valore letterale stesso. Una let riceve il tipo più ampio, perché potrebbe essere riassegnata in seguito.

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

Questo conta quando una funzione accetta solo certi valori:

// 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"'.

Risolvi con const, oppure annotando la variabile: let dir: "left" | "right" = "left". I tipi letterali hanno una pagina tutta loro, literal types.

Oggetti e array allargano i loro membri

Le proprietà di un oggetto letterale sono modificabili, quindi si allargano come let, anche quando l'oggetto stesso è const. Gli elementi degli array fanno lo stesso. as const rende tutto readonly e mantiene i tipi letterali.

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]);

Inferenza del tipo di ritorno

Il tipo di ritorno di una funzione viene dedotto dalle sue istruzioni return. Quando ce ne sono diverse, il risultato è la loro 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");

I tipi di ritorno dedotti vanno bene per la maggior parte delle funzioni. Scrivi il tipo di ritorno in modo esplicito sulle funzioni esportate o pubbliche quando vuoi che la firma sia un contratto: una modifica nel corpo che restituisce un tipo diverso fallisce allora nella funzione, non in qualche chiamante lontano.

Contextual typing: le callback ricevono i loro tipi

I parametri non vengono dedotti dal modo in cui una funzione viene chiamata. Ci sono due eccezioni. Un parametro con un valore predefinito prende il tipo di quel valore (function retry(times = 3) rende times un number). E una funzione scritta dove è già atteso un tipo funzione riceve i tipi dei parametri da quel contesto, quindi i parametri delle callback non hanno bisogno di annotazioni.

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"));

Lo stesso vale per forEach, filter, reduce, le callback delle Promise, i gestori di eventi e qualsiasi funzione passata a un parametro con un tipo funzione dichiarato.

I parametri vanno annotati

Senza un valore predefinito o un contesto di questo tipo, TypeScript non guarda come viene chiamata una funzione per indovinare i tipi dei parametri. Con strict attivo, un parametro non annotato è l'errore 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.

Scrivi function double(x: number) e il blocco stampa 42, con il tipo di ritorno number dedotto da x * 2.

Best common type

Per un array letterale con valori di tipo diverso, TypeScript deduce un array della union dei loro tipi. Non cerca un tipo base comune che non hai indicato.

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);

L'array vuoto è l'unico caso a cui fare attenzione. const list = [] parte come array "in evoluzione", il cui tipo cresce a ogni push; un'annotazione, const list: string[] = [], dichiara subito l'intenzione ed è più chiara.

Quando annotare

Il modo più rapido per vedere cosa è stato dedotto è passare il mouse sul nome nel tuo editor. Senza un editor, assegna il valore a una variabile di un tipo sbagliato, come const probe: boolean = mixed;, e il messaggio di errore del compilatore indica il tipo dedotto.