TypeScript - 接口的扩展

你好，未来的编程巨星们！今天，我们将深入TypeScript接口的精彩世界，学习如何扩展它们。在本课结束时，你将能够像专业人士一样创建强大且灵活的接口。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始这段旅程吧！

语法

在我们深入了解之前，让我们从基础开始。在TypeScript中，扩展一个接口就像使用extends关键字一样简单。以下是通用语法：

interface 子接口 extends 父接口 {
// 额外的属性或方法
}

把它想象成皇室家族中的继承。子接口“继承”了父接口的所有属性和方法，并且还可以添加自己独特的特点。

扩展单个接口

让我们从一个简单的例子开始。想象我们正在创建一个关于魔法生物的游戏。我们将从一个基本的Creature接口开始：

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

现在，假设我们想要创建一种特殊的生物——龙！我们可以扩展Creature接口来创建一个Dragon接口：

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

在这个例子中，Dragon继承了Creature的name和age属性，并添加了自己的breatheFire方法和wingspan属性。

让我们看看如何使用这个接口：

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

console.log(smaug.name);  // 输出: Smaug
smaug.breatheFire();  // 输出: 咆哮！?

正如你所看到的，smaug拥有Creature的所有属性，加上额外的龙类特性。

扩展多个接口

现在，如果我们的龙不仅是生物，还是宝藏守护者呢？在TypeScript中，我们可以扩展多个接口！让我们创建一个TreasureKeeper接口并扩展两者：

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

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

现在我们的DragonLord既是能够喷火的生物，也是宝藏的守护者。酷吧？

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("嗖！?"),
addTreasure: (item) => console.log(`将${item}加入到宝藏中！`)
};

falkor.addTreasure("金色王冠");  // 输出: 将金色王冠加入到宝藏中！

增强现有接口

有时，你可能想要给现有接口添加更多属性。TypeScript允许你通过重新声明接口并添加新属性来实现这一点：

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "独角兽"
};

现在Creature有了name、age和species属性。这种技术被称为“声明合并”。

创建组合接口

你还可以通过使用交叉类型将现有接口组合起来创建新接口：

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

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

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("我在飞！?✈️"),
swim: () => console.log("继续游！?‍♂️")
};

nemo.fly();  // 输出: 我在飞！?✈️
nemo.swim();  // 输出: 继续游！?‍♂️

覆盖属性和方法

在扩展接口时，你可以覆盖父接口中的属性和方法。这在子接口中需要对属性或方法进行更具体描述时很有用：

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

interface Cat extends Animal {
makeSound: () => string;  // 更具体的返回类型
}

const kitty: Cat = {
makeSound: () => "喵！"
};

console.log(kitty.makeSound());  // 输出: 喵！

在这个例子中，我们覆盖了makeSound方法，使其返回一个字符串而不是void。

以下是我们在本课中介绍的方法的总结表：

方法	描述
扩展单个接口	使用extends关键字从单个接口继承
扩展多个接口	使用逗号分隔的接口列表与extends一起使用
增强现有接口	重新声明接口并添加新属性
创建组合接口	使用交叉类型(&)组合接口
覆盖属性和方法	在子接口中重新定义属性或方法

至此，各位！你已经通过掌握接口扩展提升了你的TypeScript技能。记住，接口就像乐高积木——你可以以无数种方式组合它们，在代码中构建复杂且类型安全的结构。

在你继续编程之旅时，你会发现这些技术将帮助你创建更加灵活、可重用且易于维护的代码。所以勇敢地前进，自信地使用接口吧！快乐编程！??‍??‍?

Credits: Image by storyset