TS 中 interface 和 type 详解

news2025/4/2 19:18:49

在 TypeScript 中，interface 和 type 都可以用来定义类型，但它们有一些关键的区别。以下是它们的详细对比：

1. 基本定义

interface
用于声明对象的形状（属性和方法），是面向对象编程中“接口”概念的体现。
```
interface Person {
  name: string;
  age: number;
  greet(): void;
}
```

type
用于定义类型的别名，可以表示任何类型（包括对象、联合类型、交叉类型、元组等）。

type Person = {
  name: string;
  age: number;
  greet(): void;
};

type ID = string | number; // 联合类型
type Coordinates = [number, number]; // 元组

2. 扩展性

interface
通过 extends 直接扩展其他接口，支持声明合并（多次声明同名接口会自动合并）。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

// 声明合并
interface User {
  id: string;
}

interface User {
  name: string;
}

// 最终 User 类型为 { id: string; name: string }

type
通过 & 实现交叉类型来扩展，但无法直接扩展其他类型别名。

type Animal = {
  name: string;
};

type Dog = Animal & {
  bark(): void;
};

// 无法合并同名类型别名
type User = { id: string };
type User = { name: string }; // ❌ 报错

3. 灵活性

interface
仅能定义对象类型，无法直接表示联合类型、交叉类型或基本类型别名。
```
interface A = string; // ❌ 报错
```

type
可以表示任意复杂类型：

type StringOrNumber = string | number; // 联合类型
type Point3D = { x: number } & { y: number } & { z: number }; // 交叉类型
type Callback = (data: string) => void; // 函数类型
type Pair<T> = [T, T]; // 泛型元组

4. 实现（`implements`）

interface
类可以直接通过 implements 实现接口：

interface Animal {
  name: string;
  eat(): void;
}

class Dog implements Animal {
  name = "Buddy";
  eat() { console.log("Eating..."); }
}

type
类型别名也可以被类实现，但语法需要严格匹配：

type Animal = {
  name: string;
  eat(): void;
};

class Dog implements Animal {
  name = "Buddy";
  eat() { console.log("Eating..."); }
}

5. 工具类型兼容性

interface
某些工具类型（如 Omit、Pick）可能对接口更友好：

interface User {
  id: string;
  name: string;
  age: number;
}

type SimpleUser = Omit<User, "age">; // { id: string; name: string }

type
类型别名与工具类型完全兼容，但可能需要额外操作：

type User = {
  id: string;
  name: string;
  age: number;
};

type SimpleUser = Omit<User, "age">;

6. 性能差异

interface
在大型项目中，接口的声明合并特性可能导致意外的类型扩展，需谨慎使用。
type
类型别名在复杂类型操作（如递归）中可能更高效，但实际差异通常可以忽略。

7. 使用场景建议

场景	推荐使用	原因
定义对象类型	`interface`	支持声明合并、扩展更直观
需要联合或交叉类型	`type`	无法用 `interface` 直接表示
类实现（`implements`）	`interface`	更符合面向对象设计
需要类型别名（如元组）	`type`	`interface` 无法定义非对象类型
第三方库类型扩展	`interface`	通过声明合并扩展类型

总结

特性	`interface`	`type`
声明方式	声明对象形状	定义类型别名
扩展	`extends` 或声明合并	`&` 交叉类型
灵活性	仅对象类型	任意类型（联合、交叉、元组等）
合并声明	✅ 支持	❌ 不支持
实现类	✅ `implements`	✅ 需要严格匹配
工具类型兼容性	高	高