Suy luận kiểu trong TypeScript: khi nào cần chú thích kiểu

Suy luận kiểu (type inference) là việc TypeScript tự tìm ra một kiểu mà bạn không viết. Khởi tạo một biến thì nó nhận kiểu của giá trị; trả về một giá trị từ hàm thì kiểu trả về đi theo. Phần lớn code TypeScript có ít chú thích kiểu hơn nhiều so với người ta nghĩ.

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

Các chú thích trong code cho thấy trình soạn thảo hiển thị gì khi bạn rê chuột lên từng tên. Dòng cuối là lỗi biên dịch (TS2322) dù count chưa từng được chú thích kiểu; // @ts-expect-error đánh dấu lỗi đó là có chủ ý để phần còn lại của khối lệnh vẫn chạy.

let và const: mở rộng literal

Một const không bao giờ thay đổi, nên TypeScript cho nó kiểu hẹp nhất: chính giá trị literal đó. Một let nhận kiểu rộng hơn, vì nó có thể được gán lại sau này.

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

Điều này quan trọng khi một hàm chỉ chấp nhận một số giá trị nhất định:

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

Sửa bằng const, hoặc chú thích kiểu cho biến: let dir: "left" | "right" = "left". Literal type có trang riêng, literal type.

Đối tượng và mảng mở rộng kiểu của thành viên

Thuộc tính của object literal có thể thay đổi, nên chúng bị mở rộng giống let, kể cả khi bản thân đối tượng là const. Phần tử mảng cũng vậy. as const biến mọi thứ thành readonly và giữ nguyên các literal type.

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

Suy luận kiểu trả về

Kiểu trả về của một hàm được suy ra từ các câu lệnh return. Khi có nhiều câu lệnh, kết quả là union của chúng.

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

Kiểu trả về được suy ra là đủ dùng cho hầu hết các hàm. Hãy viết tường minh kiểu trả về cho những hàm được export hoặc công khai khi bạn muốn chữ ký hàm là một cam kết: khi đó, một thay đổi trong thân hàm khiến nó trả về kiểu khác sẽ báo lỗi ngay tại hàm, chứ không phải ở một nơi gọi xa xôi nào đó.

Kiểu theo ngữ cảnh: callback nhận được kiểu

Tham số không được suy ra từ cách hàm được gọi. Có hai ngoại lệ. Một tham số có giá trị mặc định nhận kiểu của giá trị đó (function retry(times = 3) khiến times là number). Và một hàm được viết ở nơi đã có sẵn một kiểu hàm mong đợi sẽ nhận kiểu tham số từ ngữ cảnh đó, nên tham số của callback không cần chú thích kiểu.

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

Điều tương tự áp dụng cho forEach, filter, reduce, callback của Promise, trình xử lý sự kiện và mọi hàm bạn truyền vào một tham số có kiểu hàm đã khai báo.

Tham số cần chú thích kiểu

Không có giá trị mặc định hay ngữ cảnh như vậy, TypeScript không nhìn vào cách hàm được gọi để đoán kiểu tham số. Khi bật strict, một tham số không có chú thích kiểu là lỗi 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.

Viết function double(x: number) thì khối lệnh in ra 42, với kiểu trả về number được suy ra từ x * 2.

Kiểu chung tốt nhất

Với một mảng literal chứa các loại giá trị khác nhau, TypeScript suy ra một mảng có kiểu là union của các kiểu đó. Nó không đi tìm một kiểu cơ sở chung mà bạn không nhắc tới.

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

Mảng rỗng là trường hợp cần để ý. const list = [] bắt đầu là một mảng "tiến hóa" có kiểu lớn dần theo mỗi lần push; một chú thích kiểu, const list: string[] = [], nói rõ ý định ngay từ đầu và dễ hiểu hơn.

Khi nào cần chú thích kiểu

Cách nhanh nhất để xem kiểu được suy ra là rê chuột lên tên đó trong trình soạn thảo. Nếu không có trình soạn thảo, hãy gán giá trị cho một biến có kiểu sai, như const probe: boolean = mixed;, và thông báo lỗi của trình biên dịch sẽ nêu tên kiểu được suy ra.