TypeScript - Mở rộng Interface

Xin chào, các ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của các interface trong TypeScript và học cách mở rộng chúng. Cuối bài học này, bạn sẽ có khả năng tạo ra các interface mạnh mẽ, linh hoạt như một chuyên gia. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và bắt đầu hành trình của chúng ta nhé!

Cú pháp

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với những điều cơ bản. Trong TypeScript, việc mở rộng một interface rất đơn giản, chỉ cần sử dụng từ khóa extends. Dưới đây là cú pháp tổng quát:

interface ChildInterface extends ParentInterface {
// Các thuộc tính hoặc phương thức bổ sung
}

Hãy tưởng tượng như việc kế thừa trong một gia đình hoàng gia. Interface con sẽ "kế thừa" tất cả các thuộc tính và phương thức của interface cha, và cũng có thể thêm các đặc điểm độc đáo của riêng nó.

Mở rộng một Interface duy nhất

Hãy bắt đầu với một ví dụ đơn giản. Giả sử chúng ta đang tạo một trò chơi về các sinh vật huyền bí. Chúng ta sẽ bắt đầu với một interface cơ bản Creature:

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

Bây giờ, hãy tưởng tượng chúng ta muốn tạo một loại sinh vật đặc biệt - một con rồng! Chúng ta có thể mở rộng interface Creature để tạo ra interface Dragon:

interface Dragon extends Creature {
breatheFire: () => void;
wingspan: number;
}

Trong ví dụ này, Dragon kế thừa các thuộc tính name và age từ Creature, và thêm phương thức breatheFire và thuộc tính wingspan của riêng nó.

Hãy xem chúng ta có thể sử dụng nó như thế nào:

const smaug: Dragon = {
name: "Smaug",
age: 1000,
wingspan: 200,
breatheFire: () => console.log("Roar! ?")
};

console.log(smaug.name);  // Output: Smaug
smaug.breatheFire();  // Output: Roar! ?

Như bạn có thể thấy, smaug có tất cả các thuộc tính của Creature, cộng với các đặc điểm riêng của rồng.

Mở rộng nhiều Interface

Bây giờ, giả sử con rồng của chúng ta không chỉ là một sinh vật, mà còn là một kẻ cất giữ kho báu? Trong TypeScript, chúng ta có thể mở rộng nhiều interface! Hãy tạo một interface TreasureKeeper và mở rộng cả hai:

interface TreasureKeeper {
treasureCount: number;
addTreasure: (item: string) => void;
}

interface DragonLord extends Creature, TreasureKeeper {
breatheFire: () => void;
wingspan: number;
}

Bây giờ DragonLord là một sinh vật có thể thở lửa và cất giữ kho báu. Đúng là cool phải không?

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("Whoosh! ?"),
addTreasure: (item) => console.log(`Added ${item} to the hoard!`)
};

falkor.addTreasure("Golden Crown");  // Output: Added Golden Crown to the hoard!

Mở rộng một Interface hiện có

Đôi khi, bạn có thể muốn thêm nhiều thuộc tính vào một interface hiện có. TypeScript cho phép bạn làm điều này bằng cách khai báo lại interface với các thuộc tính mới:

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "Unicorn"
};

Bây giờ Creature có các thuộc tính name, age, và species. Kỹ thuật này được gọi là "kết hợp khai báo".

Tạo Interface phức hợp

Bạn cũng có thể tạo ra các interface mới bằng cách kết hợp các interface hiện có sử dụng các loại交集:

interface Flyer {
fly: () => void;
}

interface Swimmer {
swim: () => void;
}

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("I'm flying! ?✈️"),
swim: () => console.log("Just keep swimming! ?‍♂️")
};

nemo.fly();  // Output: I'm flying! ?✈️
nemo.swim();  // Output: Just keep swimming! ?‍♂️

ghi đè thuộc tính và phương thức

Khi mở rộng interface, bạn có thể ghi đè các thuộc tính và phương thức từ interface cha. Điều này rất hữu ích khi bạn muốn cụ thể hóa một thuộc tính hoặc phương thức trong interface con:

interface Animal {
makeSound: () => void;
}

interface Cat extends Animal {
makeSound: () => string;  // Loại trả về cụ thể hơn
}

const kitty: Cat = {
makeSound: () => "Meow!"
};

console.log(kitty.makeSound());  // Output: Meow!

Trong ví dụ này, chúng ta đã ghi đè phương thức makeSound để trả về một chuỗi thay vì void.

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

Phương thức	Mô tả
Mở rộng một Interface duy nhất	Sử dụng từ khóa extends để kế thừa từ một interface
Mở rộng nhiều Interface	Sử dụng extends với các interface tách biệt nhau
Mở rộng một Interface hiện có	Khai báo lại interface với các thuộc tính mới
Tạo Interface phức hợp	Sử dụng các loại交集 (&) để kết hợp interface
Ghi đè thuộc tính và phương thức	Định nghĩa lại các thuộc tính hoặc phương thức trong interface con

Và thế là bạn đã có nó, các bạn ơi! Bạn vừa nâng cấp kỹ năng TypeScript của mình bằng cách thành thạo kỹ thuật mở rộng interface.

Nhớ rằng, interface giống như những mảnh LEGO - bạn có thể kết hợp chúng theo nhiều cách khác nhau để xây dựng các cấu trúc phức tạp và an toàn trong mã của bạn.

Khi bạn tiếp tục hành trình lập trình của mình, bạn sẽ thấy rằng các kỹ thuật này sẽ giúp bạn tạo ra mã linh hoạt, có thể tái sử dụng và dễ bảo trì hơn. Vậy, hãy tiếp tục và tự tin sử dụng interface! Chúc các bạn lập trình vui vẻ! ??‍??‍?

Credits: Image by storyset