接口与类型别名的使用深度解析

一句话概括

TypeScript 中的接口（interface）和类型别名（type）都用于定义数据类型，但 interface 更专注于对象/函数类型且支持声明合并，type 可定义任意类型且不支持合并，实际开发中需根据场景选择。

背景

在 TypeScript 开发中，我们经常会需要定义复杂的数据结构（如对象、函数、联合类型等），interface 和 type 是两种最常用的类型定义方式。很多初学者会困惑两者的区别，甚至误用导致类型定义不规范、可维护性差。本文将系统梳理两者的核心特性、差异及最佳实践。

概念与定义

接口（Interface）

接口是 TypeScript 特有的类型定义方式，专门用于描述对象的形状（Shape），也可定义函数类型、类实现约束等。它更像一种“契约”，规定对象必须包含哪些属性、方法。

类型别名（Type Alias）

类型别名是给任意 TypeScript 类型起一个可复用的名字，它不仅能定义对象类型，还能定义原始类型、联合类型、交叉类型、元组等任意合法类型。

最小示例

接口定义对象类型

interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
}

const user: User = { name: "张三", age: 25 };

类型别名定义联合类型

type Status = "pending" | "success" | "error";

let requestStatus: Status = "pending";

核心知识点拆解

1. 声明合并（Declaration Merging）

interface 支持声明合并：如果同一个接口被定义了多次，TypeScript 会自动将它们合并为一个接口。

interface User {
  name: string;
}
interface User {
  age: number;
}
// 合并后等价于 { name: string; age: number; }
const user: User = { name: "张三", age: 25 };

type 不支持声明合并：重复定义同名的类型别名会直接报错。

type User = { name: string };
type User = { age: number }; // 报错：重复标识符 'User'

2. 可定义的类型范围

• interface：只能定义对象类型或函数类型，无法定义原始类型、联合类型、元组等。

  interface Str = string; // 报错：接口只能定义对象或函数类型
  

• type：可定义任意合法 TypeScript 类型，包括原始类型、联合类型、交叉类型、元组等。

  type Str = string;
  type ID = string | number;
  type Pair = [string, number];
  

3. 继承与扩展

• interface 使用 extends 实现继承，可继承多个接口：

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

• type 使用 & 交叉类型实现扩展，同样可组合多个类型：

  type Person = { name: string };
  type User = Person & { age: number };
  

4. 编译结果差异

interface 和 type 在编译为 JavaScript 后都会被完全擦除（TypeScript 是静态类型语言，类型信息不会进入运行时），但两者的编译产物有一个细微差异：

• 声明合并的 interface 在编译时会保留合并后的类型信息（仅用于类型检查，运行时仍无痕迹）；
• type 定义的类型在编译后无任何残留。

实战案例

案例1：用接口定义 API 响应类型

前端开发中，我们通常会用接口定义后端 API 的响应结构，方便类型提示和校验：

interface ApiResponse<T = any> {
  code: number;
  message: string;
  data: T;
}

interface UserInfo {
  id: number;
  name: string;
  avatar: string;
}

// 使用时自动提示 data 的结构
async function fetchUser() {
  const res = await fetch("/api/user");
  const json: ApiResponse<UserInfo> = await res.json();
  console.log(json.data.name); // 类型正确
}

案例2：用类型别名定义组件 Props

在 React/Vue 组件开发中，我们经常需要定义 Props 的类型，此时 type 更灵活：

// 用 type 定义联合类型 Props
type ButtonProps = {
  type: "primary" | "default" | "danger";
  onClick: () => void;
  children: React.ReactNode;
  disabled?: boolean;
};

const Button: React.FC<ButtonProps> = (props) => {
  // ...
};

底层原理

接口声明合并的实现

TypeScript 编译器在处理 interface 时，会维护一个接口类型池，当遇到同名的接口声明时，会将新的成员合并到已有的接口类型中。合并规则如下：

1. 非函数成员：必须类型唯一，否则报错；
2. 函数成员：会被合并为函数重载，后续声明的重载优先级更高。

示例：

interface Foo {
  bar: string;
  func: (a: number) => void;
}
interface Foo {
  bar: string; // 类型相同，合法
  func: (a: string) => void; // 函数重载，合法
}
// 合并后 func 的类型为：(a: string) => void; (a: number) => void;

类型别名的处理

类型别名在编译时会被内联展开，即所有使用类型别名的地方都会被替换为它的实际类型。因此，类型别名不会产生额外的类型信息，也不会影响编译性能（除了复杂的递归类型）。

高频面试题解析

问题1：interface 和 type 的核心区别是什么？

参考答案：

1. 声明合并：interface 支持声明合并，type 不支持；
2. 类型范围：interface 只能定义对象/函数类型，type 可定义任意类型；
3. 扩展方式：interface 用 extends 继承，type 用 & 交叉类型；
4. 编译产物：两者编译后都被擦除，但 interface 的合并信息会在编译时保留（仅用于类型检查）。

问题2：什么时候用 interface，什么时候用 type？

参考答案：

• 优先用 interface：当需要定义对象/函数类型、且可能需要扩展或声明合并时（如第三方库的类型定义，方便用户扩展）；
• 优先用 type：当需要定义联合类型、交叉类型、原始类型别名，或不需要合并时（如 React 组件的 Props 定义，更灵活）。

问题3：interface 和 type 的性能差异？

参考答案： 两者性能差异极小，几乎可以忽略。仅在非常复杂的递归类型场景下，interface 的声明合并可能会略慢于 type 的内联展开，但现代 TypeScript 编译器已经做了大量优化，实际开发中无需刻意关注。

总结与扩展

总结

| 特性 | interface | type | |———————|————-|——–| | 声明合并 | ✅ 支持 | ❌ 不支持 | | 定义任意类型 | ❌ 不支持 | ✅ 支持 | | 继承/扩展 | extends | & 交叉类型 | | 编译后擦除 | ✅ | ✅ |

最佳实践

1. 对象类型优先用 interface，方便扩展和合并；
2. 联合类型、交叉类型、原始类型别名优先用 type；
3. 第三方库的类型定义优先用 interface，方便用户扩展。

扩展阅读

• TypeScript 官方文档：Interfaces
• TypeScript 官方文档：Type Aliases
• 声明合并的底层实现：TypeScript Compiler Internals