# TypeScript - Giao diện: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các bạn, những ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của các giao diện TypeScript. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người bạn đáng tin cậy dẫn đường cho bạn trong hành trình thú vị này. Nào, hãy lấy một ly đồ uống yêu thích của bạn, và chúng ta cùng bắt đầu nhé!

## Giao diện là gì?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu giao diện là gì. Hãy tưởng tượng giao diện như một hợp đồng hoặc một bản đồ. Chúng xác định cấu trúc của một đối tượng,告诉 chúng ta đối tượng đó nên có những thuộc tính và phương thức nào. Đó giống như một công thức liệt kê tất cả các nguyên liệu bạn cần để làm một chiếc bánh ngon!

## Khai báo giao diện

Hãy bắt đầu với những điều cơ bản của việc khai báo một giao diện. Dưới đây là một ví dụ đơn giản:

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

Trong ví dụ này, chúng ta đã tạo một giao diện叫做 Person. Nó nói rằng bất kỳ đối tượng nào thuộc loại Person phải có hai thuộc tính: name (là một chuỗi) và age (là một số).

Bây giờ, hãy sử dụng giao diện này:

let john: Person = {
  name: "John Doe",
  age: 30
};

console.log(john.name); // Output: John Doe

Ở đây, chúng ta đã tạo một đối tượng john tuân theo giao diện Person. TypeScript sẽ đảm bảo rằng john có cả hai thuộc tính name và age, với các loại đúng.

Thuộc tính tùy chọn

Đôi khi, bạn có thể muốn một số thuộc tính là tùy chọn. Chúng ta có thể làm điều này bằng cách sử dụng ký hiệu ?:

interface Car {
  make: string;
  model: string;
  year?: number;
}

let myCar: Car = {
  make: "Toyota",
  model: "Corolla"
};

// Cũng hợp lệ
let yourCar: Car = {
  make: "Honda",
  model: "Civic",
  year: 2022
};

Trong ví dụ này, year là tùy chọn. Bạn có thể bao gồm nó hoặc bỏ nó ra - cả hai đều hợp lệ!

Kiểu liên kết và giao diện

Đôi khi, một thuộc tính có thể chấp nhận nhiều hơn một loại. Đây là nơi mà các kiểu liên kết rất hữu ích. Hãy xem một ví dụ:

interface Pet {
  name: string;
  age: number | string;
}

let myDog: Pet = {
  name: "Buddy",
  age: 5
};

let myCat: Pet = {
  name: "Whiskers",
  age: "3 years"
};

Trong trường hợp này, age có thể là một số hoặc một chuỗi. Điều này cho chúng ta nhiều sự linh hoạt hơn trong việc thể hiện tuổi của một động vật.

Giao diện và mảng

Giao diện cũng có thể mô tả các mảng. Dưới đây là cách thực hiện:

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray = ["Apple", "Banana", "Cherry"];
console.log(myArray[1]); // Output: Banana

Giao diện này nói rằng khi bạn truy cập bất kỳ chỉ số nào (là một số) của mảng này, bạn sẽ nhận được một chuỗi.

Chúng ta cũng có thể sử dụng giao diện để mô tả các cấu trúc mảng phức tạp hơn:

interface Inventory {
  [index: number]: {
    name: string;
    quantity: number;
  };
}

let shopInventory: Inventory = [
  { name: "T-shirt", quantity: 20 },
  { name: "Jeans", quantity: 15 }
];

console.log(shopInventory[0].name); // Output: T-shirt

Giao diện Inventory mô tả một mảng trong đó mỗi phần tử là một đối tượng có các thuộc tính name và quantity.

Giao diện và kế thừa

Giống như trong cuộc sống thực, các giao diện có thể kế thừa từ các giao diện khác. Điều này rất hữu ích khi bạn muốn tạo một phiên bản cụ thể hơn của một giao diện hiện có. Hãy xem một ví dụ:

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

let myPuppy: Dog = {
  name: "Max",
  breed: "Labrador"
};

console.log(`${myPuppy.name} is a ${myPuppy.breed}`);
// Output: Max is a Labrador

Ở đây, giao diện Dog kế thừa từ giao diện Animal và thêm thuộc tính breed của riêng nó.

Bạn thậm chí có thể kế thừa nhiều giao diện:

interface Swimmer {
  swim(): void;
}

interface Flyer {
  fly(): void;
}

interface Duck extends Animal, Swimmer, Flyer {
  quack(): void;
}

let myDuck: Duck = {
  name: "Donald",
  swim: () => console.log("Swimming..."),
  fly: () => console.log("Flying..."),
  quack: () => console.log("Quack!")
};

myDuck.quack(); // Output: Quack!

Trong ví dụ này, giao diện Duck kế thừa từ Animal, Swimmer, và Flyer, và thêm phương thức quack của riêng nó.

Kết luận

Chúc mừng! Bạn đã刚刚迈出了进入 TypeScript 接口世界的第一步。记住，接口就像友好的守护者，帮助确保你的对象具有正确的结构。它们对于创建清晰、可理解和可维护的代码非常有用。

下面是我们所涵盖的方法的快速回顾：

Phương thức	Mô tả
Khai báo giao diện	Xác định cấu trúc của các đối tượng
Thuộc tính tùy chọn	Làm cho một số thuộc tính tùy chọn bằng cách sử dụng ?
Kiểu liên kết	Cho phép các thuộc tính chấp nhận nhiều loại
Giao diện mảng	Mô tả cấu trúc của các mảng
Kế thừa giao diện	Tạo các giao diện cụ thể hơn dựa trên các giao diện hiện có

Tiếp tục thực hành, và sớm bạn sẽ tạo giao diện như một chuyên gia! Nhớ rằng, trong thế giới lập trình, mỗi chuyên gia đều từng là người mới bắt đầu. Vì vậy, đừng sợ thử nghiệm và mắc lỗi - đó là cách chúng ta học hỏi và phát triển. Chúc bạn lập trình vui vẻ!

Credits: Image by storyset