TypeScript 中 type 与 interface 的区别与应用场景

什么是 type 和 interface？

在 TypeScript 中，type (类型别名) 和 interface (接口) 都是我们用来定义自定义类型的重要工具。它们允许我们为代码中的数据结构和对象的形状创建明确的契约。虽然它们在很多情况下可以互换使用，尤其是在定义对象类型时，但它们之间存在一些关键的区别，理解这些区别有助于我们根据具体场景做出更合适的选择。

核心区别详解

让我们深入探讨 type 和 interface 之间的主要差异。

1. 定义方式

interface 主要用于定义对象的结构，包括其属性和方法。

// 使用 interface 定义对象结构
interface PersonInterface {
  name: string;
  age: number;
  greet(): void;
}

const person1: PersonInterface = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

type 则更加灵活，它可以用于定义任何类型，包括基本类型、联合类型、元组、对象类型等。

// 使用 type 定义对象结构
type PersonType = {
  name: string;
  age: number;
  greet(): void;
};

const person2: PersonType = {
  name: "Bob",
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// type 定义其他类型
type StringOrNumber = string | number;
type PointTuple = [number, string];
type UserID = string;

2. 扩展（继承）

两种方式都支持类型的扩展，但语法有所不同。

interface 使用 extends 关键字来实现继承，可以继承一个或多个接口。

interface Animal {
  species: string;
}

interface Mammal extends Animal {
  hasFur: boolean;
}

interface Dog extends Mammal {
  breed: string;
  bark(): void;
}

const myDog: Dog = {
  species: "Canis familiaris",
  hasFur: true,
  breed: "Labrador",
  bark() {
    console.log("Woof woof!");
  }
};

type 通过交叉类型 (&) 来实现类似扩展的效果。

type BaseEntity = {
  id: string;
  createdAt: Date;
};

type Product = BaseEntity & {
  name: string;
  price: number;
};

const tshirt: Product = {
  id: "prod_123",
  createdAt: new Date(),
  name: "Cool T-Shirt",
  price: 29.99
};

3. 合并声明 (Declaration Merging)

这是 interface 的一个独特特性。如果你多次声明同名的 interface，它们会自动合并成一个单一的接口。

interface User {
  id: number;
}

interface User { // 同名接口会自动合并
  name: string;
  email?: string; // 可以添加可选属性
}

const currentUser: User = {
  id: 1,
  name: "John Doe",
  // email: "john.doe@example.com" // email 是可选的
};

type 别名不支持声明合并。如果尝试声明同名的 type，TypeScript 会报错，提示标识符重复。

type Config = {
  apiKey: string;
};

// 尝试声明同名 type 会导致错误
// type Config = { // Error: Duplicate identifier 'Config'.
//   debugMode: boolean;
// };

这个特性使得 interface 在需要扩展第三方库的类型定义或在大型项目中分模块定义接口时非常有用。

4. 使用范围与能力总结

实际应用建议 (最佳实践)

那么，在实际开发中，我们应该如何选择呢？

1. 优先使用 interface 定义对象和类的结构： 当我们需要定义一个对象的形状时，interface 通常是更自然和推荐的选择。它的声明合并特性对于库的作者或者需要扩展现有接口的场景非常有用。代码可读性上，interface User {...} 比 type User = {...} 更能清晰地表达。

   // 推荐使用 interface 定义对象/类结构
   interface Vehicle {
     brand: string;
     model: string;
     startEngine(): void;
   }
   
   class Car implements Vehicle {
     constructor(public brand: string, public model: string, private _isEngineOn: boolean = false) {}
   
     startEngine() {
       this._isEngineOn = true;
       console.log(`${this.brand} ${this.model} engine started.`);
     }
     // ...其他方法
   }

2. 使用 type 定义联合类型、元组、映射类型等复杂类型： 当我们需要定义非对象类型，或者需要利用 type 独有的高级类型能力（如联合类型 |、交叉类型 &（用于组合而非继承）、元组、映射类型等）时，type 是不二之选。

   // 推荐使用 type 定义联合类型
   type ResponseStatus = "success" | "error" | "pending";
   
   // 推荐使用 type 定义元组
   type NameAgePair = [string, number];
   
   // 推荐使用 type 定义函数签名 (虽然 interface 也可以)
   type LogFunction = (message: string, level: LogLevel) => void;
   type LogLevel = "info" | "warn" | "error";
   
   // 推荐使用 type 定义映射类型
   // 假设 User 接口已定义
   // interface User {
   //   id: number;
   //   name: string;
   //   email?: string;
   // }
   type PartialUser = {
       [K in keyof User]?: User[K];
   };

3. 一致性原则： 在一个项目中，保持一致性也很重要。如果团队或项目已经有既定的规范（例如，总是用 interface 定义对象，总是用 type 定义联合类型），那么遵循这些规范通常是好的做法。

总结归纳

总的来说，interface 和 type 都是 TypeScript 类型系统中的强大工具。interface 更侧重于描述数据结构（特别是对象的形状）并支持声明合并，使其在面向对象编程和库定义中非常有用。而 type 则提供了更广泛的类型定义能力，包括联合类型、元组和映射类型等。

理解它们的核心区别和适用场景，可以帮助我们编写出更清晰、更可维护的 TypeScript 代码。在大多数情况下，选择哪一个可能不会对程序的功能产生巨大影响，但遵循上述建议可以提高代码的可读性和团队协作效率。