M

MLOG

Tiếng Việt

Khám phá các mẫu generic nâng cao của TypeScript: ràng buộc, kiểu tiện ích, suy luận kiểu và các ứng dụng thực tế để viết mã mạnh mẽ, có thể tái sử dụng trong bối cảnh toàn cầu.

Generic trong TypeScript: Các Mẫu Sử Dụng Nâng Cao

Generic trong TypeScript là một tính năng mạnh mẽ cho phép bạn viết mã linh hoạt hơn, có khả năng tái sử dụng và an toàn về kiểu. Chúng cho phép bạn định nghĩa các kiểu có thể hoạt động với nhiều loại kiểu khác nhau trong khi vẫn duy trì việc kiểm tra kiểu tại thời điểm biên dịch. Bài đăng blog này đi sâu vào các mẫu sử dụng nâng cao, cung cấp các ví dụ thực tế và thông tin chi tiết cho các nhà phát triển ở mọi cấp độ, bất kể vị trí địa lý hay nền tảng của họ.

Hiểu về những điều cơ bản: Tóm tắt lại

Trước khi đi sâu vào các chủ đề nâng cao, chúng ta hãy nhanh chóng tóm tắt lại những điều cơ bản. Generics cho phép bạn tạo ra các thành phần có thể hoạt động với nhiều loại kiểu khác nhau thay vì chỉ một kiểu duy nhất. Bạn khai báo một tham số kiểu generic trong cặp dấu ngoặc nhọn (`<>`) sau tên hàm hoặc lớp. Tham số này hoạt động như một trình giữ chỗ cho kiểu thực tế sẽ được chỉ định sau khi hàm hoặc lớp được sử dụng.

Ví dụ, một hàm generic đơn giản có thể trông như thế này:

function identity(arg: T): T {
  return arg;
}

Trong ví dụ này, T là tham số kiểu generic. Hàm identity nhận một đối số kiểu T và trả về một giá trị kiểu T. Sau đó, bạn có thể gọi hàm này với các kiểu khác nhau:


let stringResult: string = identity("hello");
let numberResult: number = identity(42);

Generic Nâng cao: Vượt ra ngoài những điều cơ bản

Bây giờ, hãy cùng khám phá những cách phức tạp hơn để tận dụng generic.

1. Ràng buộc Kiểu Generic

Ràng buộc kiểu cho phép bạn giới hạn các kiểu có thể được sử dụng với một tham số kiểu generic. Điều này rất quan trọng khi bạn cần đảm bảo rằng một kiểu generic có các thuộc tính hoặc phương thức cụ thể. Bạn có thể sử dụng từ khóa extends để chỉ định một ràng buộc.

Hãy xem xét một ví dụ mà bạn muốn một hàm truy cập vào thuộc tính length:

function loggingIdentity(arg: T): T {
  console.log(arg.length);
  return arg;
}

Trong ví dụ này, T bị ràng buộc với các kiểu có thuộc tính length là kiểu number. Điều này cho phép chúng ta truy cập arg.length một cách an toàn. Việc cố gắng truyền một kiểu không thỏa mãn ràng buộc này sẽ dẫn đến lỗi tại thời điểm biên dịch.

Ứng dụng toàn cầu: Điều này đặc biệt hữu ích trong các kịch bản liên quan đến xử lý dữ liệu, chẳng hạn như làm việc với mảng hoặc chuỗi, nơi bạn thường cần biết độ dài. Mẫu này hoạt động theo cùng một cách, bất kể bạn đang ở Tokyo, London, hay Rio de Janeiro.

2. Sử dụng Generic với Interface

Generics hoạt động liền mạch với các interface, cho phép bạn định nghĩa các interface linh hoạt và có thể tái sử dụng.

interface GenericIdentityFn {
  (arg: T): T;
}

function identity(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn = identity;

Ở đây, GenericIdentityFn là một interface mô tả một hàm nhận một kiểu generic T và trả về cùng kiểu T đó. Điều này cho phép bạn định nghĩa các hàm với các chữ ký kiểu khác nhau trong khi vẫn duy trì an toàn kiểu.

Góc nhìn toàn cầu: Mẫu này cho phép bạn tạo các interface có thể tái sử dụng cho các loại đối tượng khác nhau. Ví dụ, bạn có thể tạo một interface generic cho các đối tượng truyền dữ liệu (DTO) được sử dụng trên các API khác nhau, đảm bảo cấu trúc dữ liệu nhất quán trong toàn bộ ứng dụng của bạn bất kể khu vực triển khai.

3. Lớp Generic

Các lớp cũng có thể là generic:


class GenericNumber {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

Lớp GenericNumber này có thể chứa một giá trị kiểu T và định nghĩa một phương thức add hoạt động trên kiểu T. Bạn khởi tạo lớp với kiểu mong muốn. Điều này có thể rất hữu ích để tạo các cấu trúc dữ liệu như stack hoặc queue.

Ứng dụng toàn cầu: Hãy tưởng tượng một ứng dụng tài chính cần lưu trữ và xử lý nhiều loại tiền tệ khác nhau (ví dụ: USD, EUR, JPY). Bạn có thể sử dụng một lớp generic để tạo lớp `CurrencyAmount` trong đó `T` đại diện cho loại tiền tệ, cho phép tính toán và lưu trữ an toàn các khoản tiền tệ khác nhau.

4. Nhiều Tham số Kiểu

Generics có thể sử dụng nhiều tham số kiểu:


function swap(a: T, b: U): [U, T] {
  return [b, a];
}

let result = swap("hello", 42);
// result[0] is number, result[1] is string

Hàm swap nhận hai đối số thuộc các kiểu khác nhau và trả về một tuple với các kiểu đã được hoán đổi.

Sự liên quan toàn cầu: Trong các ứng dụng kinh doanh quốc tế, bạn có thể có một hàm nhận hai mẩu dữ liệu liên quan có kiểu khác nhau và trả về một tuple của chúng, chẳng hạn như ID khách hàng (chuỗi) và giá trị đơn hàng (số). Mẫu này không ưu tiên bất kỳ quốc gia cụ thể nào và thích ứng hoàn hảo với nhu cầu toàn cầu.

5. Sử dụng Tham số Kiểu trong Ràng buộc Generic

Bạn có thể sử dụng một tham số kiểu trong một ràng buộc.


function getProperty(obj: T, key: K) {
  return obj[key];
}

let obj = { a: 1, b: 2, c: 3 };

let value = getProperty(obj, "a"); // value is number

Trong ví dụ này, K extends keyof T có nghĩa là K chỉ có thể là một khóa của kiểu T. Điều này cung cấp sự an toàn kiểu mạnh mẽ khi truy cập các thuộc tính của đối tượng một cách động.

Khả năng áp dụng toàn cầu: Điều này đặc biệt hữu ích khi làm việc với các đối tượng cấu hình hoặc cấu trúc dữ liệu nơi việc truy cập thuộc tính cần được xác thực trong quá trình phát triển. Kỹ thuật này có thể được áp dụng trong các ứng dụng ở bất kỳ quốc gia nào.

6. Các Kiểu Tiện ích Generic (Generic Utility Types)

TypeScript cung cấp một số kiểu tiện ích tích hợp sẵn sử dụng generic để thực hiện các phép biến đổi kiểu phổ biến. Chúng bao gồm:

Ví dụ:


interface User {
  id: number;
  name: string;
  email: string;
}

// Partial - tất cả thuộc tính đều là tùy chọn
let optionalUser: Partial = {};

// Pick - chỉ có thuộc tính id và name
let userSummary: Pick = { id: 1, name: 'John' };

Trường hợp sử dụng toàn cầu: Những tiện ích này là vô giá khi tạo các mô hình yêu cầu và phản hồi API. Ví dụ, trong một ứng dụng thương mại điện tử toàn cầu, Partial có thể được sử dụng để đại diện cho một yêu cầu cập nhật (nơi chỉ một số chi tiết sản phẩm được gửi), trong khi Readonly có thể đại diện cho một sản phẩm được hiển thị ở giao diện người dùng.

7. Suy luận Kiểu với Generic

TypeScript thường có thể suy luận các tham số kiểu dựa trên các đối số bạn truyền cho một hàm hoặc lớp generic. Điều này có thể làm cho mã của bạn sạch hơn và dễ đọc hơn.


function createPair(a: T, b: T): [T, T] {
  return [a, b];
}

let pair = createPair("hello", "world"); // TypeScript suy luận T là string

Trong trường hợp này, TypeScript tự động suy luận rằng T là string vì cả hai đối số đều là chuỗi.

Tác động toàn cầu: Suy luận kiểu làm giảm nhu cầu chú thích kiểu rõ ràng, điều này có thể làm cho mã của bạn ngắn gọn và dễ đọc hơn. Điều này cải thiện sự hợp tác giữa các nhóm phát triển đa dạng, nơi có thể tồn tại các cấp độ kinh nghiệm khác nhau.

8. Kiểu Điều kiện với Generic

Các kiểu điều kiện, kết hợp với generic, cung cấp một cách mạnh mẽ để tạo ra các kiểu phụ thuộc vào giá trị của các kiểu khác.


type Check = T extends string ? string : number;

let result1: Check = "hello"; // string
let result2: Check = 42; // number

Trong ví dụ này, Check được đánh giá là string nếu T kế thừa từ string, ngược lại, nó được đánh giá là number.

Bối cảnh toàn cầu: Các kiểu điều kiện cực kỳ hữu ích để định hình các kiểu một cách động dựa trên các điều kiện nhất định. Hãy tưởng tượng một hệ thống xử lý dữ liệu dựa trên khu vực. Các kiểu điều kiện sau đó có thể được sử dụng để biến đổi dữ liệu dựa trên các định dạng dữ liệu hoặc kiểu dữ liệu cụ thể của khu vực. Điều này rất quan trọng đối với các ứng dụng có yêu cầu quản trị dữ liệu toàn cầu.

9. Sử dụng Generic với Mapped Types

Mapped types cho phép bạn biến đổi các thuộc tính của một kiểu dựa trên một kiểu khác. Kết hợp chúng với generic để có sự linh hoạt:


type OptionsFlags = {
  [K in keyof T]: boolean;
};

interface FeatureFlags {
  darkMode: boolean;
  notifications: boolean;
}

// Tạo một kiểu trong đó mỗi cờ tính năng được bật (true) hoặc tắt (false)
let featureFlags: OptionsFlags = {
  darkMode: true,
  notifications: false,
};

Kiểu OptionsFlags nhận một kiểu generic T và tạo một kiểu mới trong đó các thuộc tính của T giờ đây được ánh xạ tới các giá trị boolean. Điều này rất mạnh mẽ khi làm việc với các cấu hình hoặc cờ tính năng.

Ứng dụng toàn cầu: Mẫu này cho phép tạo các lược đồ cấu hình dựa trên các cài đặt cụ thể của từng khu vực. Cách tiếp cận này cho phép các nhà phát triển xác định các cấu hình riêng cho từng khu vực (ví dụ: các ngôn ngữ được hỗ trợ trong một khu vực). Nó cho phép tạo và bảo trì dễ dàng các lược đồ cấu hình ứng dụng toàn cầu.

10. Suy luận Nâng cao với Từ khóa infer

Từ khóa infer cho phép bạn trích xuất các kiểu từ các kiểu khác trong các kiểu điều kiện.


type ReturnType any> = T extends (...args: any) => infer R ? R : any;

function myFunction(): string {
  return "hello";
}

let result: ReturnType = "hello"; // result is string

Ví dụ này suy luận kiểu trả về của một hàm bằng cách sử dụng từ khóa infer. Đây là một kỹ thuật phức tạp để thao tác kiểu nâng cao hơn.

Tầm quan trọng toàn cầu: Kỹ thuật này có thể rất quan trọng trong các dự án phần mềm toàn cầu lớn, phân tán để cung cấp sự an toàn về kiểu khi làm việc với các chữ ký hàm phức tạp và cấu trúc dữ liệu phức tạp. Nó cho phép tạo ra các kiểu một cách động từ các kiểu khác, nâng cao khả năng bảo trì mã.

Các Thực hành Tốt nhất và Mẹo

Kết luận: Nắm bắt Sức mạnh của Generic trên Toàn cầu

Generic trong TypeScript là nền tảng để viết mã mạnh mẽ và dễ bảo trì. Bằng cách thành thạo các mẫu nâng cao này, bạn có thể tăng cường đáng kể tính an toàn về kiểu, khả năng tái sử dụng và chất lượng tổng thể của các ứng dụng JavaScript của mình. Từ các ràng buộc kiểu đơn giản đến các kiểu điều kiện phức tạp, generic cung cấp các công cụ bạn cần để xây dựng phần mềm có thể mở rộng và bảo trì cho khán giả toàn cầu. Hãy nhớ rằng các nguyên tắc sử dụng generic vẫn nhất quán bất kể vị trí địa lý của bạn.

Bằng cách áp dụng các kỹ thuật được thảo luận trong bài viết này, bạn có thể tạo ra mã có cấu trúc tốt hơn, đáng tin cậy hơn và dễ mở rộng hơn, cuối cùng dẫn đến các dự án phần mềm thành công hơn bất kể quốc gia, châu lục hay doanh nghiệp bạn tham gia. Hãy nắm bắt generic, và mã của bạn sẽ cảm ơn bạn!