TypeScript - Đối tượng: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các đối tượng TypeScript. Đừng lo lắng nếu bạn chưa từng viết mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ tự tin làm việc với các đối tượng như một chuyên gia!

Đối tượng là gì?

Trước khi chúng ta đi sâu vào các chi tiết cụ thể của TypeScript, hãy nói về đối tượng là gì trong lập trình. Hãy tưởng tượng bạn có một chiếc ba lô. Chiếc ba lô này có thể chứa nhiều vật phẩm khác nhau, mỗi vật phẩm có những đặc điểm riêng. Trong lập trình, một đối tượng giống như chiếc ba lô đó - nó là một容器 có thể chứa các thông tin liên quan khác nhau.

Cú pháp: Làm thế nào để tạo đối tượng trong TypeScript

Hãy bắt đầu từ cơ bản. Trong TypeScript, chúng ta có thể tạo đối tượng bằng cách sử dụng cái gọi là "ký hiệu literall đối tượng". Đây là một thuật ngữ nghe có vẻ phức tạp, nhưng thực tế nó rất đơn giản. Dưới đây là một ví dụ:

let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Trong ví dụ này, myBackpack là đối tượng của chúng ta. Nó có ba thuộc tính: color, capacity, và isWaterproof. Mỗi thuộc tính có một giá trị được gán cho nó.

Ghi chú kiểu: Chỉ định TypeScript biết chúng ta mong đợi gì

Một trong những điều tuyệt vời về TypeScript là chúng ta có thể chỉ định chính xác kiểu dữ liệu mà chúng ta mong đợi đối tượng của mình chứa. Điều này được gọi là "ghi chú kiểu". Hãy nâng cấp ví dụ về ba lô của chúng ta:

let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Ở đây, chúng ta đang告诉 TypeScript rằng color luôn phải là một chuỗi ký tự, capacity luôn phải là một số, và isWaterproof luôn phải là một boolean. Điều này giúp phát hiện lỗi sớm và làm cho mã của chúng ta đáng tin cậy hơn.

Ký hiệu literall đối tượng: Xem xét chi tiết hơn

Chúng ta đã thấy ký hiệu literall đối tượng trong hành động, nhưng hãy phân tích nó sâu hơn. Cú pháp theo mẫu này:

let objectName = {
property1: value1,
property2: value2,
// ... và tiếp tục
};

Mỗi thuộc tính được phân tách bằng dấu phẩy, và toàn bộ đối tượng được bao bọc trong dấu ngoặc móc {}. Nó giống như packing items into our backpack, với mỗi vật phẩm có một tên (thuộc tính) và một mô tả (giá trị).

Mẫu kiểu TypeScript: Đối tượng có thể tái sử dụng

Đôi khi, chúng ta muốn tạo nhiều đối tượng có cấu trúc alike. Đó là khi mẫu kiểu TypeScript trở nên hữu ích. Chúng ta có thể định nghĩa một kiểu một lần và tái sử dụng nó:

type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};

let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};

Kiểu Backpack này hoạt động như một bản vẽ, đảm bảo rằng bất kỳ đối tượng nào có kiểu Backpack đều có cấu trúc chính xác.

Đối tượng làm tham số hàm: Truyền ba lô của chúng ta xung quanh

Đối tượng có thể được truyền vào các hàm, cho phép chúng ta làm việc với các cấu trúc dữ liệu phức tạp. Dưới đây là một ví dụ:

function describeBackpack(backpack: Backpack): string {
return `This ${backpack.color} backpack has a capacity of ${backpack.capacity} liters and is ${backpack.isWaterproof ? "waterproof" : "not waterproof"}.`;
}

console.log(describeBackpack(myBackpack));
// Output: This blue backpack has a capacity of 20 liters and is waterproof.

Trong hàm này, chúng ta truyền đối tượng Backpack và sử dụng các thuộc tính của nó để tạo ra một mô tả.

Đối tượng vô danh: Ba lô không có tên

Đôi khi, chúng ta cần tạo đối tượng ngay lập tức mà không gán chúng cho một biến. Những đối tượng này được gọi là đối tượng vô danh:

function printBackpackColor(backpack: { color: string }): void {
console.log(`The backpack is ${backpack.color}.`);
}

printBackpackColor({ color: "green" });
// Output: The backpack is green.

Ở đây, chúng ta đang tạo một đối tượng ngay trong lời gọi hàm. Nó giống như mô tả một chiếc ba lô cho ai đó mà không thực sự có chiếc ba lô đó.

Kiểu Duck-typing: Nếu nó trông giống như một con vịt...

TypeScript sử dụng khái niệm gọi là "kiểu Duck-typing". Ý tưởng là: nếu nó trông giống như một con vịt và kêu như một con vịt, thì có lẽ nó là một con vịt. Trong thuật ngữ TypeScript, điều này có nghĩa là hình dạng của đối tượng quan trọng hơn kiểu cụ thể của nó:

interface Bag {
color: string;
carry(): void;
}

let myBackpack = {
color: "purple",
capacity: 25,
carry: function() { console.log("Carrying the backpack"); }
};

function useBag(bag: Bag) {
console.log(`Using a ${bag.color} bag`);
bag.carry();
}

useBag(myBackpack); // This works!

Ngay cả khi myBackpack không được khai báo rõ ràng là một Bag, nó có tất cả các thuộc tính và phương thức mà một Bag nên có, vì vậy TypeScript cho phép điều này.

Kết thúc hành trình ba lô

Chúc mừng! Bạn vừa đóng gói chiếc ba lô TypeScript đầu tiên của mình với kiến thức. Nhớ rằng, các đối tượng vô cùng mạnh mẽ trong lập trình - chúng cho phép chúng ta nhóm các dữ liệu và chức năng liên quan lại với nhau, giống như một chiếc ba lô thực sự giữ tất cả các vật dụng đi bộ đường dài của bạn ở một nơi.

Trong hành trình lập trình tiếp theo của bạn, bạn sẽ thấy các đối tượng ở khắp mọi nơi. Chúng là các khối xây dựng của các ứng dụng phức tạp, từ danh sách công việc đơn giản đến các ứng dụng web phức tạp. Hãy tiếp tục thực hành, và sớm bạn sẽ tạo ra và manipulates các đối tượng một cách dễ dàng!

Dưới đây là bảng tóm tắt các phương thức chúng ta đã xem xét:

Phương thức	Mô tả
Ký hiệu literall đối tượng	Tạo đối tượng sử dụng cú pháp {}
Ghi chú kiểu	Chỉ định cấu trúc của đối tượng
Mẫu kiểu	Tạo các đối tượng có thể tái sử dụng
Đối tượng làm tham số hàm	Truyền đối tượng vào hàm
Đối tượng vô danh	Tạo đối tượng mà không gán cho biến
Kiểu Duck-typing	Kiểm tra kiểu dựa trên hình dạng đối tượng

Chúc bạn lập trình vui vẻ, và mong rằng các đối tượng TypeScript của bạn luôn không có lỗi và đầy ắp các tính năng thú vị!

Credits: Image by storyset