Bài 10.4: Type inference và annotation trong TypeScript

Chào mừng trở lại với series về lập trình Web Front-end! Sau khi làm quen với những khái niệm cơ bản về TypeScript, chúng ta sẽ đi sâu vào hai tính năng cốt lõi giúp TypeScript trở nên vô cùng mạnh mẽ và được yêu thích: Type Inference (Suy luận kiểu dữ liệu) và Type Annotation (Ghi chú kiểu dữ liệu).

Hiểu rõ hai khái niệm này sẽ giúp bạn viết mã TypeScript hiệu quả hơn, an toàn hơn và dễ bảo trì hơn. TypeScript mang hệ thống kiểu tĩnh vào thế giới năng động của JavaScript, và chính Type Inference cùng Type Annotation là những công cụ giúp điều đó xảy ra một cách linh hoạt và thông minh.

Type Annotation: Khi bạn "nói rõ" kiểu dữ liệu là gì

Type Annotation đơn giản là việc bạn minh bạch khai báo kiểu dữ liệu mà một biến, tham số hàm, hoặc giá trị trả về của hàm mong đợi hoặc sẽ có. Cú pháp rất trực quan: bạn đặt dấu hai chấm : sau tên biến (hoặc tham số), theo sau là tên kiểu dữ liệu.

// Khai báo một biến 'userName' và nói rõ nó PHẢI là kiểu string
let userName: string = "Alice";

// Khai báo một biến 'userAge' và nói rõ nó PHẢI là kiểu number
let userAge: number = 30;

// Khai báo một biến 'isActive' và nói rõ nó PHẢI là kiểu boolean
let isActive: boolean = true;

Trong các ví dụ trên, chúng ta đã sử dụng Type Annotation để ràng buộc kiểu dữ liệu cho các biến. Nếu bạn cố gắng gán một giá trị không đúng kiểu, trình biên dịch TypeScript sẽ ngay lập tức báo lỗi. Đây là một trong những lợi ích chính của việc sử dụng TypeScript: bắt lỗi kiểu dữ liệu ngay từ giai đoạn phát triển, trước khi mã được thực thi.

Type Annotation đặc biệt quan trọng khi làm việc với các cấu trúc phức tạp hơn:

// Annotation cho mảng: một mảng chứa chỉ CÁC SỐ
let primeNumbers: number[] = [2, 3, 5, 7, 11];

// Nếu thử thêm một string vào mảng primeNumbers sẽ báo lỗi biên dịch:
// primeNumbers.push("thirteen"); // Lỗi! Argument of type 'string' is not assignable to parameter of type 'number'.

// Annotation cho đối tượng: xác định rõ cấu trúc và kiểu dữ liệu của từng thuộc tính
let user: { name: string, age: number, isStudent: boolean };

// Bây giờ, khi gán giá trị, nó phải tuân thủ cấu trúc đã khai báo
user = {
  name: "Bob",
  age: 25,
  isStudent: false
};

// Nếu thiếu hoặc sai kiểu thuộc tính, TypeScript sẽ báo lỗi:
// user = { name: "Charlie", age: "thirty" }; // Lỗi! Type 'string' is not assignable to type 'number'.
// user = { name: "David" }; // Lỗi! Property 'age' is missing in type '{ name: string; }'.

Và đặc biệt quan trọng là khi định nghĩa hàm: Type Annotation giúp xác định rõ kiểu của các tham số đầu vào và kiểu của giá trị trả về. Điều này tạo ra "hợp đồng" rõ ràng cho hàm của bạn.

// Annotation cho tham số (name: string) và giá trị trả về (: string)
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Sử dụng hàm đúng kiểu
let message = greet("Typescript"); // message sẽ có kiểu string

// Sử dụng hàm sai kiểu sẽ báo lỗi:
// let invalidMessage = greet(123); // Lỗi! Argument of type 'number' is not assignable to parameter of type 'string'.

Type Annotation mang lại sự rõ ràng và kiểm soát tối đa. Nó rất hữu ích khi bạn muốn đảm bảo rằng một biến hoặc hàm luôn luôn tuân thủ một kiểu dữ liệu nhất định, hoặc khi TypeScript không thể tự suy luận được kiểu một cách chính xác (ví dụ: tham số hàm, biến khai báo nhưng chưa gán giá trị).

Type Inference: Khi TypeScript đủ thông minh để "đoán" kiểu dữ liệu

Đây là tính năng khiến TypeScript trở nên ít rườm rà hơn so với các ngôn ngữ tĩnh khác. Type Inference là khả năng của trình biên dịch TypeScript tự động xác định kiểu dữ liệu của một biến hoặc biểu thức mà không cần bạn phải ghi chú tường minh.

Khi bạn khai báo một biến và gán ngay một giá trị ban đầu cho nó, TypeScript sẽ nhìn vào giá trị đó và suy luận ra kiểu của biến.

// TypeScript nhìn vào giá trị "World" và suy luận 'greeting' có kiểu string
let greeting = "World";
// Bạn không cần viết: let greeting: string = "World";

// TypeScript nhìn vào 42 và suy luận 'answer' có kiểu number
let answer = 42;
// Bạn không cần viết: let answer: number = 42;

// TypeScript nhìn vào true và suy luận 'isReady' có kiểu boolean
let isReady = true;
// Bạn không cần viết: let isReady: boolean = true;

Trong những trường hợp đơn giản như trên, việc sử dụng Type Inference giúp mã nguồn ngắn gọn và dễ đọc hơn. Mặc dù bạn không ghi chú kiểu, biến greeting vẫn bị ràng buộc là kiểu string. Nếu bạn thử gán một kiểu khác:

let greeting = "World";
greeting = 123; // Lỗi! Type 'number' is not assignable to type 'string'.

TypeScript vẫn bắt được lỗi nhờ vào khả năng suy luận của nó.

Type Inference cũng hoạt động tốt với các cấu trúc dữ liệu phức tạp hơn khi chúng được khởi tạo ngay lập tức:

// TypeScript nhìn vào mảng [10, 20, 30] và suy luận 'numbers' có kiểu number[]
let numbers = [10, 20, 30];

// TypeScript nhìn vào đối tượng và suy luận 'config' có kiểu { url: string, timeout: number }
let config = {
  url: "https://api.example.com",
  timeout: 5000
};

// Bây giờ config.url PHẢI là string và config.timeout PHẢI là number
// config.timeout = "long"; // Lỗi! Type 'string' is not assignable to type 'number'.

Một ví dụ khác về suy luận là giá trị trả về của hàm khi bạn không chú thích nó:

// TypeScript nhìn vào giá trị trả về (a + b) và suy luận hàm add trả về kiểu number
function add(a: number, b: number) { // Chú ý: ở đây chỉ chú thích tham số, không chú thích giá trị trả về
  return a + b;
}

let sum = add(5, 3); // sum sẽ có kiểu number (được suy luận từ kiểu trả về của add)

Mặc dù bạn không ghi : number sau cặp dấu ngoặc đơn (), TypeScript đủ thông minh để biết rằng phép cộng hai số sẽ trả về một số, và do đó suy luận kiểu trả về của hàm add là number. Tuy nhiên, việc chú thích rõ giá trị trả về (: number) thường được khuyến khích để mã nguồn minh bạch hơn, đặc biệt với các hàm phức tạp hoặc khi giá trị trả về có thể không rõ ràng ngay lập tức.

Kết hợp Annotation và Inference: Lựa chọn thông minh

Vậy, khi nào thì dùng Type Annotation, và khi nào thì dựa vào Type Inference? Câu trả lời là: hãy sử dụng cả hai một cách thông minh!

Sử dụng Inference khi TypeScript có thể dễ dàng và chính xác suy luận ra kiểu dữ liệu từ giá trị ban đầu. Điều này giúp mã nguồn ngắn gọn và tập trung vào logic chính hơn là các chi tiết về kiểu dữ liệu.
```
// Inference là đủ tốt ở đây
let itemCounter = 0; // Suy luận là number
let productTitle = "Laptop"; // Suy luận là string
```

Sử dụng Annotation khi bạn muốn minh bạch hóa, kiểm soát hoặc khi TypeScript không thể suy luận chính xác:

Tham số và giá trị trả về của hàm: Luôn luôn nên chú thích để định nghĩa rõ ràng "hợp đồng" của hàm. Điều này giúp người sử dụng hàm biết họ cần truyền gì và sẽ nhận lại gì.

// Rất nên chú thích tham số và giá trị trả về
function processOrder(itemId: string, quantity: number, discount?: number): number {
  // ... logic tính toán ...
  return finalPrice; // giá trị trả về là number
}

Biến được khai báo mà chưa gán giá trị ngay: Nếu bạn khai báo let data;, TypeScript sẽ suy luận là any, điều này làm mất đi lợi ích của việc kiểm tra kiểu. Hãy chú thích rõ kiểu dữ liệu mà bạn mong đợi biến đó sẽ giữ sau này.

let userData: { id: number, name: string }; // Rõ ràng biến này sẽ giữ một đối tượng có cấu trúc cụ thể
// ... sau đó mới gán giá trị ...
// userData = fetchUserData(); // Giả sử hàm này trả về đúng kiểu { id: number, name: string }

Khi kiểu suy luận không khớp với ý định của bạn: Ví dụ, bạn muốn một mảng chỉ chứa chuỗi, nhưng bạn khởi tạo nó là mảng rỗng []. TypeScript sẽ suy luận là any[]. Lúc này, Annotation là cần thiết.
```
let names: string[] = []; // Bắt buộc phải là mảng chuỗi
// let names = []; // TypeScript suy luận là any[] - không an toàn
```

Với các kiểu phức tạp, Alias, hoặc Interface: Khi làm việc với các kiểu dữ liệu tùy chỉnh mà bạn đã định nghĩa (sử dụng type hoặc interface), việc sử dụng Annotation giúp mã nguồn rõ ràng hơn nhiều.

interface Product {
  id: number;
  name: string;
  price: number;
}

let products: Product[] = []; // Rõ ràng đây là mảng các đối tượng theo kiểu Product
// ... thêm các sản phẩm vào mảng ...

function displayProduct(product: Product): void { // Hàm nhận vào một đối tượng kiểu Product, không trả về gì
  console.log(`Product: ${product.name}, Price: $${product.price}`);
}

Sự cân bằng giữa Inference và Annotation là chìa khóa để viết mã TypeScript vừa an toàn, vừa dễ đọc, lại không quá dài dòng. Hãy để TypeScript làm công việc suy luận khi nó có thể, và chỉ thêm Annotation khi bạn cần sự rõ ràng, kiểm soát, hoặc khi bạn đang làm việc với các "ranh giới" của mã (như định nghĩa hàm, API public, hoặc khi khởi tạo các cấu trúc rỗng).

Hiểu và áp dụng linh hoạt Type Inference và Type Annotation sẽ giúp bạn tận dụng tối đa sức mạnh của TypeScript, biến nó thành một công cụ đắc lực trong quá trình phát triển phần mềm của mình.

Comments

There are no comments at the moment.