引言
嘿，各位前端小伙伴们！今天我们要聊聊TypeScript中的接口和类型。如果你还在为这两个概念搞不清楚而头疼，那么恭喜你，你来对地方了。让我们一起来揭开它们的神秘面纱，看看它们到底是何方神圣。
接口：你的代码合同
首先，让我们来谈谈接口（Interface）。想象一下，如果代码世界也有合同，那么接口就是其中的佼佼者。它就像是一份严格的协议，规定了对象应该长什么样子。
interface Person {
name: string;
age: number;
sayHello(): void;
}
看到了吗？这个Person接口就像是在说："嘿，如果你想成为一个'人'，你得有名字、年龄，还得会打招呼！"
使用接口很简单：
const john: Person = {
name: "John",
age: 30,
sayHello() {
console.log("Hello, I'm John!");
}
};
如果你少了什么属性，TypeScript就会像一个严厉的老师一样，指出你的错误。比如：
const bob: Person = {
name: "Bob"
// 错误：缺少 'age' 属性和 'sayHello' 方法
};
类型：万物皆可定义
而类型（Type）则更加灵活。它就像是一个百变小魔术师，几乎可以变成任何你想要的样子。
type Animal = {
species: string;
makeSound(): void;
};
type Coordinate = [number, number];
type MaybeString = string | null;
看，我们定义了一个动物类型、一个坐标类型，甚至还有一个可能是字符串的类型。类型的世界里，只有你想不到，没有它做不到。
接口 vs 类型：到底该用哪个？
现在到了关键时刻：究竟该用接口还是类型？这个问题就像是"先有鸡还是先有蛋"一样让人纠结。但别担心，我来给你指点迷津。
- 如果你在定义对象结构，两者都可以：
interface Car {
brand: string;
model: string;
}
type Truck = {
brand: string;
payloadCapacity: number;
};
- 但是，如果你想定义联合类型或交叉类型，那就得用type了：
type Vehicle = Car | Truck;
type SuperCar = Car & { topSpeed: number };
- 接口可以被类实现，而类型不行：
interface Drivable {
drive(): void;
}
class SportsCar implements Drivable {
drive() {
console.log("Vroom vroom!");
}
}
- 接口可以被扩展，而类型更倾向于组合：
interface Animal {
name: string;
}
interface Dog extends Animal {
bark(): void;
}
type Cat = Animal & { meow(): void };
- 接口可以合并声明，这在处理第三方库时特别有用：
interface Window {
title: string;
}
interface Window {
ts: TypeScriptAPI;
}
// 两个接口会自动合并
实战案例：打造一个小型游戏系统
让我们用一个简单的游戏系统来巩固一下我们学到的知识：
// 使用接口定义游戏角色的基本结构
interface Character {
name: string;
health: number;
attack(target: Character): void;
}
// 使用类型定义不同的武器类型
type Weapon = "sword" | "bow" | "staff";
// 使用类型别名组合多个类型
type Warrior = Character & { weapon: "sword", specialMove: "charge" };
type Archer = Character & { weapon: "bow", specialMove: "quickshot" };
type Mage = Character & { weapon: "staff", specialMove: "fireball" };
// 使用类型联合定义游戏中的所有角色类型
type GameCharacter = Warrior | Archer | Mage;
// 实现一个战士
const conan: Warrior = {
name: "Conan",
health: 100,
weapon: "sword",
specialMove: "charge",
attack(target: Character) {
console.log(`${this.name} swings his sword at ${target.name}!`);
target.health -= 10;
}
};
// 实现一个法师
const gandalf: Mage = {
name: "Gandalf",
health: 80,
weapon: "staff",
specialMove: "fireball",
attack(target: Character) {
console.log(`${this.name} casts a spell on ${target.name}!`);
target.health -= 15;
}
};
// 创建一个函数来处理战斗
function battle(attacker: GameCharacter, defender: GameCharacter) {
console.log(`${attacker.name} (${attacker.weapon}) vs ${defender.name} (${defender.weapon})`);
attacker.attack(defender);
console.log(`${defender.name}'s health: ${defender.health}`);
}
battle(conan, gandalf);
看到了吗？我们用接口定义了基本的Character结构，然后用类型来创建更具体的角色类型。我们甚至还用到了联合类型来定义所有可能的游戏角色。这就是接口和类型的完美配合！
结语
好了，各位代码勇士们，我们的TypeScript接口和类型之旅到此结束。希望通过这篇文章，你已经成功地在脑海中构建了一个清晰的类型系统地图。记住，接口就像是严格的合同，而类型则是百变的魔术师。在实际开发中，它们往往是相辅相成的好搭档。
下次当你在代码中遇到它们时，别忘了今天学到的知识。相信我，熟练运用这两个工具，你的代码质量将会得到显著提升。毕竟，在TypeScript的世界里，类型就是力量！
那么，准备好开始你的TypeScript冒险了吗？去吧，用接口和类型武装你的代码，让bug们闻风丧胆吧！
海码面试 小程序
包含最新面试经验分享，面试真题解析，全栈2000+题目库，前后端面试技术手册详解；无论您是校招还是社招面试还是想提升编程能力，都能从容面对~
