Wnioskowanie typów w TypeScript: kiedy dodać adnotację

Wnioskowanie typów to TypeScript ustalający typ, którego nie napisano. Zainicjuj zmienną, a przyjmie typ wartości. Zwróć wartość z funkcji, a typ zwracany wynika z niej sam. Większość kodu w TypeScript ma dużo mniej adnotacji, niż się ludziom wydaje.

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

Komentarze pokazują, co wyświetla edytor po najechaniu na każdą nazwę. Ostatnia linia to błąd kompilacji (TS2322), mimo że count nigdy nie dostało adnotacji. // @ts-expect-error oznacza go jako oczekiwany, więc reszta bloku się wykonuje.

let a const: poszerzanie literałów

const nigdy się nie zmienia, więc TypeScript daje mu najwęższy typ: samą wartość literału. let dostaje szerszy typ, bo później można mu przypisać coś innego.

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

Ma to znaczenie, gdy funkcja przyjmuje tylko określone wartości:

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

Popraw to przez const albo przez adnotację zmiennej: let dir: "left" | "right" = "left". Typy literałów mają własną stronę, typy literałów.

Obiekty i tablice poszerzają swoje elementy

Właściwości literału obiektu są modyfikowalne, więc poszerzają się jak let, nawet gdy sam obiekt jest const. Elementy tablic zachowują się tak samo. as const czyni wszystko readonly i zachowuje typy literałów.

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

Wnioskowanie typu zwracanego

Typ zwracany funkcji jest wnioskowany z jej instrukcji return. Gdy jest ich kilka, wynikiem jest ich unia.

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

Wywnioskowane typy zwracane wystarczają w większości funkcji. Pisz typ zwracany jawnie w eksportowanych albo publicznych funkcjach, gdy chcesz, żeby sygnatura była kontraktem: zmiana w ciele, która zwraca inny typ, zgłosi wtedy błąd w samej funkcji, a nie u jakiegoś odległego wywołującego.

Typowanie kontekstowe: callbacki dostają typy

Parametry nie są wnioskowane z tego, jak funkcja jest wywoływana. Są dwa wyjątki. Parametr z wartością domyślną przyjmuje typ tej wartości (function retry(times = 3) sprawia, że times to number). A funkcja napisana tam, gdzie już oczekiwany jest typ funkcji, dostaje typy parametrów z tego kontekstu, więc parametry callbacków nie potrzebują adnotacji.

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

To samo dotyczy forEach, filter, reduce, callbacków Promise, obsługi zdarzeń i każdej funkcji przekazywanej do parametru z zadeklarowanym typem funkcji.

Parametry potrzebują adnotacji

Bez wartości domyślnej albo takiego kontekstu TypeScript nie patrzy na to, jak funkcja jest wywoływana, żeby zgadnąć typy parametrów. Przy włączonym strict parametr bez adnotacji to błąd 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.

Napisz function double(x: number), a blok wypisze 42, z typem zwracanym number wywnioskowanym z x * 2.

Najlepszy wspólny typ

Dla literału tablicy z różnymi rodzajami wartości TypeScript wnioskuje tablicę unii ich typów. Nie szuka wspólnego typu bazowego, którego nie wymieniono.

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

Jedyny przypadek, na który trzeba uważać, to pusta tablica. const list = [] zaczyna jako "ewoluująca" tablica, której typ rośnie z każdym push. Adnotacja const list: string[] = [] od razu mówi, o co chodzi, i jest czytelniejsza.

Kiedy dodać adnotację

Najszybszy sposób, żeby zobaczyć, co zostało wywnioskowane, to najechać na nazwę w edytorze. Bez edytora przypisz wartość do zmiennej o złym typie, na przykład const probe: boolean = mixed;, a komunikat błędu kompilatora poda wywnioskowany typ.