Đối tượng TypeScript được đơn giản hóa cho người mới bắt đầu

Đối tượng là một phần cơ bản của JavaScript và TypeScript. Chúng cho phép bạn nhóm dữ liệu và hàm liên quan lại với nhau, cung cấp một cách để mô hình hóa các thực thể trong thế giới thực trong mã của bạn. TypeScript tăng cường các đối tượng JavaScript với tính an toàn của kiểu, giúp mã của bạn dễ dự đoán hơn và dễ bảo trì hơn. Hướng dẫn này sẽ đơn giản hóa khái niệm về đối tượng TypeScript cho người mới bắt đầu.

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

object là một tập hợp các cặp khóa-giá trị, trong đó khóa là chuỗi (hoặc Biểu tượng) và giá trị có thể thuộc bất kỳ loại nào. Trong TypeScript, bạn có thể xác định hình dạng của đối tượng bằng cách sử dụng các loại hoặc giao diện, đảm bảo rằng đối tượng tuân theo một cấu trúc cụ thể.

Định nghĩa các đối tượng đơn giản trong TypeScript

Hãy bắt đầu bằng cách định nghĩa một đối tượng đơn giản trong TypeScript. Điều này tương tự như cách bạn định nghĩa đối tượng trong JavaScript nhưng có thêm lợi ích về tính an toàn của kiểu.

Ví dụ về đối tượng cơ bản

Sau đây là cách định nghĩa một đối tượng đơn giản trong TypeScript:

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

Trong ví dụ này, đối tượng person có hai thuộc tính: name (kiểu string) và age (kiểu number). TypeScript sẽ đảm bảo rằng đối tượng tuân thủ cấu trúc này.

Sử dụng Giao diện để Xác định Cấu trúc Đối tượng

interface là một tính năng mạnh mẽ trong TypeScript dùng để xác định hình dạng của một đối tượng. Giao diện cung cấp một cách để xác định hợp đồng trong mã của bạn, đảm bảo rằng các đối tượng tuân thủ một cấu trúc cụ thể.

Định nghĩa một giao diện

Sau đây là cách sử dụng giao diện để xác định cấu trúc của một đối tượng:

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

Trong ví dụ này, giao diện Person định nghĩa cấu trúc của đối tượng person. Biến person phải tuân thủ cấu trúc này, nếu không TypeScript sẽ báo lỗi.

Thuộc tính tùy chọn trong Đối tượng

TypeScript cho phép bạn định nghĩa các thuộc tính tùy chọn trong các đối tượng bằng ký hiệu ?. Các thuộc tính tùy chọn có thể được bỏ qua khi tạo đối tượng, mang lại sự linh hoạt trong cách bạn định nghĩa cấu trúc đối tượng.

Ví dụ với Thuộc tính Tùy chọn

Sau đây là ví dụ trong đó thuộc tính phoneNumber là tùy chọn:

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

Trong ví dụ này, employee1 không có thuộc tính phoneNumber, trong khi employee2 thì có. Cả hai đều hợp lệ theo giao diện Employee.

Thuộc tính chỉ đọc trong đối tượng

TypeScript cho phép bạn tạo thuộc tính readonly, ngăn không cho chúng bị sửa đổi sau khi đối tượng được tạo. Điều này hữu ích để tạo các đối tượng không thể thay đổi.

Ví dụ với Thuộc tính Chỉ đọc

Sau đây là cách xác định thuộc tính chỉ đọc:

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

Trong ví dụ này, thuộc tính brand được đánh dấu là readonly. Bất kỳ nỗ lực nào để sửa đổi nó sẽ dẫn đến lỗi biên dịch.

Đối tượng lồng nhau trong TypeScript

Các đối tượng TypeScript có thể được lồng nhau, nghĩa là một đối tượng có thể chứa một đối tượng khác như một thuộc tính. Điều này phổ biến trong các cấu trúc dữ liệu phức tạp.

Ví dụ về các đối tượng lồng nhau

Sau đây là ví dụ về đối tượng lồng nhau:

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

Trong ví dụ này, giao diện User có đối tượng Address lồng nhau. Đối tượng user tuân theo cấu trúc này, cho phép truy cập vào các thuộc tính lồng nhau.

Phần kết luận

Các đối tượng trong TypeScript mạnh mẽ và linh hoạt hơn các đối tượng JavaScript thông thường do định nghĩa kiểu, thuộc tính tùy chọn, thuộc tính chỉ đọc và cấu trúc lồng nhau. Bằng cách định nghĩa các đối tượng bằng giao diện, bạn có thể tạo mã mạnh mẽ hơn và không có lỗi. Bắt đầu sử dụng các đối tượng TypeScript trong các dự án của bạn để khai thác toàn bộ sức mạnh của tính an toàn kiểu và dữ liệu có cấu trúc.