Giao diện tổng quát

Thuộc phần Giới thiệu về TypeScript trong hành trình JavaScript của Coddy. Bài học 61 trên 73.

Tương tự như khi tạo hàm tổng quát, bạn cũng có thể tạo giao diện tổng quát. Cách này cho phép bạn định nghĩa cấu trúc của một đối tượng mà vẫn giữ một số kiểu thuộc tính linh hoạt và có thể tái sử dụng.

Sau đây là cách bạn tạo một giao diện tổng quát bằng cùng cú pháp tham số kiểu:

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

<T> sau tên giao diện (interface) tạo một tham số kiểu (type parameter) có thể dùng trong toàn bộ định nghĩa giao diện. Trong ví dụ này, thuộc tính value sẽ có kiểu mà bạn chỉ định khi dùng giao diện, còn isEmpty vẫn giữ kiểu boolean cố định.

Khi sử dụng một giao diện tổng quát, bạn chỉ định kiểu cụ thể trong dấu ngoặc nhọn:

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};
const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

Thử thách

Dễ

Tạo một giao diện (interface) tổng quát có tên Result, có thể chứa dữ liệu thuộc bất kỳ kiểu nào cùng với thông tin về trạng thái thành công.

Giao diện này cần có hai thuộc tính:

success thuộc kiểu boolean
data thuộc kiểu T (tham số kiểu tổng quát)

Tạo các đối tượng sau bằng giao diện tổng quát của bạn:

stringResult thuộc kiểu Result<string>, với success: true và data: "Operation completed"
numberResult thuộc kiểu Result<number>, với success: true và data: 42
booleanResult thuộc kiểu Result<boolean>, với success: false và data: false
arrayResult thuộc kiểu Result<string[]>, với success: true và data: ["item1", "item2", "item3"]

Tạo một hàm tổng quát có tên processResult với các yêu cầu sau:

Sử dụng tham số kiểu tổng quát T
Nhận một tham số result thuộc kiểu Result<T>
Trả về một thông báo dạng chuỗi
Nếu success là true, trả về "Success: [data]"
Nếu success là false, trả về "Failed: [data]"

In ra các kết quả sau:

In ra kết quả gọi processResult với stringResult
In ra kết quả gọi processResult với numberResult
In ra kết quả gọi processResult với booleanResult
In ra kết quả gọi processResult với arrayResult
In ra stringResult.data

Tự làm thử

// TODO: Viết code của bạn ở đây

// Tạo interface Result tổng quát


// Tạo các đối tượng bằng interface Result


// Tạo hàm (function) processResult tổng quát


// In ra các đầu ra cần thiết