大家好，今天咱们来聊聊 TypeScript 中两个最容易混淆的概念：type 和 interface。这是很多开发者都会遇到的问题，你准备好了吗？让我们深入探讨这两个关键字的区别和使用场景。
基本概念：type 和 interface 究竟是啥？
type
type 就是类型别名，用来给各种类型起个名字。可以是基本类型、对象类型、联合类型、交叉类型、元组等。
type Name = string;
type ID = number | string;
type Point = { x: number; y: number };
type PointArray = [number, number];
interface
interface 则专注于定义对象的结构和行为。它更像是面向对象编程中的蓝图，描述了对象应该拥有哪些属性和方法。
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeID: number;
}
用途和功能：什么时候用 type，什么时候用 interface？
type 的用途和功能
- 复杂类型组合：
type非常适合定义联合类型、交叉类型和元组。 - 灵活性高：可以进行类型变换，比如条件类型和映射类型。
type UnionType = string | number | boolean;
type Point = { x: number; y: number };
type PartialPoint = Partial<Point>;
interface 的用途和功能
- 描述对象结构：
interface用来定义对象的形状，尤其是面向对象编程中的类和对象。 - 支持多重继承：可以通过
extends关键字扩展一个或多个接口。 - 接口合并：同名接口会自动合并，方便扩展和维护。
interface User {
name: string;
age: number;
}
interface Admin extends User {
permissions: string[];
}
扩展和合并：type 和 interface 的不同之处
type 的扩展
- 交叉类型：用
&来实现类型的组合。
type A = { a: number };
type B = { b: number };
type AB = A & B; // { a: number; b: number }
- 无法进行声明合并：如果在不同地方重复定义同一个
type，编译器会报错。
interface 的扩展
- 多重继承：通过
extends关键字扩展一个或多个接口。
interface A {
a: number;
}
interface B {
b: number;
}
interface AB extends A, B {
c: number;
}
- 接口合并：在不同文件中重复声明同一个接口，TypeScript 会自动合并它们。
interface Person {
name: string;
}
interface Person {
age: number;
}
// 合并后的 Person 接口
// interface Person {
// name: string;
// age: number;
// }
实际使用场景：如何选择 type 和 interface？
使用 type 的场景
- 定义联合类型、交叉类型或复杂类型组合。
type ID = number | string;
type Point = { x: number; y: number };
type PartialPoint = Partial<Point>;
- 进行类型变换，例如映射类型。
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
使用 interface 的场景
- 定义对象的形状，尤其是当对象需要在多个地方被扩展时。
interface User {
name: string;
age: number;
}
interface Admin extends User {
permissions: string[];
}
- 需要利用接口合并功能时，通过重复声明接口来扩展对象的属性。
总结
在 TypeScript 中，type 和 interface 都可以用来定义对象的形状，但它们在功能和使用场景上各有优势。
type更适合用于复杂类型组合、类型变换，以及定义联合类型、交叉类型和元组。interface则在描述对象结构、支持多重继承和接口合并方面表现出色，特别适用于面向对象编程中的类和对象。
选择 type 还是 interface，主要取决于具体需求和使用场景。理解这两者的区别，并根据实际情况灵活应用，能让你的代码更加清晰、灵活和易于维护。希望这篇文章能帮助你更好地掌握这两个关键字，提升 TypeScript 编程技能！如果你有任何问题或想法，欢迎在评论区交流。祝大家编程愉快！
