🚀 TypeScript中的类型别名与接口的区别是什么

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签：TypeScript, type, interface, 类型别名, 接口, Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

TypeScript 中的类型别名（Type Alias） 和接口（Interface） 都是用来定义对象形状的工具。

📊 核心区别对比表

特性 类型别名 (type) 接口 (interface)
扩展方式 & 交叉类型 extends 关键字
可合并性 ❌ 不可重新声明 ✅ 声明合并
支持类型 任意类型（原始类型、联合类型、元组等） 仅对象类型
计算属性 ✅ 支持 ✅ 支持
映射类型 ✅ 支持 ❌ 不支持
泛型支持 ✅ 支持 ✅ 支持
默认导出 ✅ 支持 ✅ 支持
性能 相同 相同

1. 扩展方式的区别

接口使用 extends 关键字

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

类型别名使用交叉类型 &

type Animal = {
  name: string;
};

type Dog = Animal & {
  breed: string;
};

const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

关键区别：接口可以多重继承，类型别名使用交叉类型组合。

2. 声明合并（Declaration Merging）

接口支持声明合并

interface User {
  name: string;
}

interface User {
  age: number;
}

// 合并后等价于：
// interface User {
// name: string;
// age: number;
// }

const user: User = {
  name: "Taro",
  age: 30
};

类型别名不支持声明合并

type User = {
  name: string;
};

// ❌ 错误：重复标识符 'User'
type User = {
  age: number;
};

3. 支持的类型范围

类型别名支持任意类型

// 原始类型
type Name = string;
type Age = number;
type ID = string | number;

// 联合类型
type Status = "active" | "inactive" | "pending";

// 元组类型
type Point = [number, number];
type RGB = [number, number, number];

// 函数类型
type Add = (a: number, b: number) => number;

// 映射类型
type PartialUser = Partial<User>;
type ReadonlyUser = Readonly<User>;

接口仅支持对象类型

// ✅ 可以
interface User {
  name: string;
}

// ❌ 不可以：接口不能定义原始类型
// interface Name = string; // 语法错误

// ❌ 不可以：接口不能定义联合类型
// interface Status = "active" | "inactive"; // 语法错误

4. 映射类型（Mapped Types）

类型别名支持映射类型

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

// 将所有属性变为可选
type PartialUser = {
  [K in keyof User]?: User[K];
};

// 将所有属性变为只读
type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};

// 仅选择部分属性
type PickUser = Pick<User, "name" | "email">;

接口不支持映射类型

// ❌ 错误：接口不能使用映射类型语法
// interface PartialUser {
// [K in keyof User]?: User[K];
// }

5. 实战对比示例

示例 1：定义对象类型

使用接口

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

使用类型别名

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

示例 2：扩展类型

接口扩展

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

// 多重继承
interface Pet {
  owner: string;
}

interface DomesticDog extends Dog, Pet {
  vaccinated: boolean;
}

类型别名扩展

type Animal = {
  name: string;
};

type Dog = Animal & {
  breed: string;
};

// 多重交叉
type Pet = {
  owner: string;
};

type DomesticDog = Dog & Pet & {
  vaccinated: boolean;
};

示例 3：联合类型（只能用 type）

// ✅ 类型别名可以定义联合类型
type Status = "pending" | "approved" | "rejected";
type ID = string | number;
type Response = SuccessResponse | ErrorResponse;

// ❌ 接口不能定义联合类型
// interface Status = "pending" | "approved"; // 语法错误

示例 4：元组类型（只能用 type）

// ✅ 类型别名可以定义元组
type Point = [number, number];
type RGB = [number, number, number];
type NamedPoint = [x: number, y: number];

// ❌ 接口不能直接定义元组

示例 5：函数类型

使用类型别名（推荐）

type Add = (a: number, b: number) => number;
type Callback = (error: Error | null, data?: any) => void;

使用接口

interface Add {
  (a: number, b: number): number;
}

interface Callback {
  (error: Error | null, data?: any): void;
}

6. 泛型支持

接口泛型

interface Response<T> {
  data: T;
  status: number;
  message: string;
}

const userResponse: Response<User> = {
  data: { id: 1, name: "Alice", email: "alice@example.com" },
  status: 200,
  message: "Success"
};

类型别名泛型

type Response<T> = {
  data: T;
  status: number;
  message: string;
};

const userResponse: Response<User> = {
  data: { id: 1, name: "Alice", email: "alice@example.com" },
  status: 200,
  message: "Success"
};

🌟 最终建议

✅ 使用场景推荐

选择指南表

场景 推荐使用 原因
定义对象形状 interface 或 type 两者都可以，interface 更符合 OOP 思想
需要声明合并 interface 扩展第三方库类型定义
联合类型 type interface 不支持
元组类型 type interface 不支持
映射类型 type interface 不支持
函数类型 type 语法更简洁
React Props interface 社区约定，支持扩展
工具类型 type 更灵活，支持复杂类型操作

核心要点总结

💡 关键知识点

← 返回首页