TypeScript - 接口：初学者的友好指南

你好啊，未来的编程巨星！今天，我们将要深入 TypeScript 接口的奇妙世界。如果你之前从未编写过代码，也不用担心——我将成为你这次激动人心旅程的可靠向导。那么，拿起你最喜欢的饮料，让我们一起开始吧！

TypeScript - Interfaces

接口是什么？

在我们深入了解细节之前，让我们先了解一下接口是什么。可以把接口想象成一份合同或者一份蓝图。它们定义了对象的结构，告诉我们对象应该有哪些属性和方法。这就像一份列出所有制作美味蛋糕所需材料的食谱！

声明接口

让我们从声明接口的基础开始。这里有一个简单的例子：

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

在这个例子中，我们创建了一个名为 Person 的接口。它表示任何 Person 类型的对象都必须有两个属性：name（字符串类型）和 age（数字类型）。

现在，让我们使用这个接口：

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

console.log(john.name); // 输出：John Doe

在这里，我们创建了一个遵循 Person 接口的对象 john。TypeScript 会确保 john 有 name 和 age 这两个属性，并且类型正确。

可选属性

有时候，你可能希望某些属性是可选的。我们可以使用 ? 符号来实现这一点：

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

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

// 这也是有效的
let yourCar: Car = {
make: "Honda",
model: "Civic",
year: 2022
};

在这个例子中，year 是可选的。你可以包含它或者省略它——两者都是有效的！

联合类型和接口

有时候，一个属性可能接受多种类型。这时联合类型就派上用场了。让我们看一个例子：

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

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

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

在这种情况下，age 可以是数字或字符串。这给了我们在表示宠物年龄上有更多的灵活性。

接口和数组

接口也可以描述数组。下面是如何操作的：

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

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

这个接口表示当你访问这个数组的任何索引（数字）时，你会得到一个字符串。

我们还可以使用接口来描述更复杂的数组结构：

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); // 输出：T-shirt

这个 Inventory 接口描述了一个数组，其中每个元素都是一个包含 name 和 quantity 属性的对象。

接口和继承

就像现实生活中一样，接口可以从其他接口继承。当你想创建一个现有接口的更具体版本时，这非常有用。让我们看一个例子：

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}`);
// 输出：Max is a Labrador

在这里，Dog 接口继承了 Animal 接口并添加了它自己的 breed 属性。

你甚至可以继承多个接口：

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(); // 输出：Quack!

在这个例子中，我们的 Duck 接口继承了 Animal、Swimmer 和 Flyer，并添加了它自己的 quack 方法。

总结

恭喜你！你已经迈出了进入 TypeScript 接口世界的第一步。记住，接口就像友好的守护者，帮助确保你的对象具有正确的结构。它们对于创建清晰、可理解和可维护的代码非常有用。

以下是我们在本文中涵盖的方法的快速回顾：

方法	描述
声明接口	定义对象的结构
可选属性	使用 `?` 使某些属性可选
联合类型	允许属性接受多个类型
数组接口	描述数组结构
接口继承	基于现有接口创建更具体的接口

继续练习，很快你就能像专家一样创建接口了！记住，在编程世界中，每个专家都曾是初学者。所以不要害怕尝试和犯错误——这是我们学习和成长的方式。祝您编程愉快！

Credits: Image by storyset