当前位置：首页 > article >正文

请谈谈 TypeScript 中的接口（interface）和类型别名（type alias），它们的区别是什么？

article 2025/3/13 0:12:31

1. 核心概念对比（基础认知）

// 接口定义方式：专注于描述对象结构
interface User {
  id: number;
  name: string;
  login(): Promise<void>;
}

// 类型别名定义方式：更通用的类型命名
type Point = {
  x: number;
  y: number;
};

// 类型别名可以定义非对象类型（重要区别）
type ID = number | string;
type StringOrNumber = string | number;

核心差异点：

接口只能描述对象类型，类型别名可以描述任何类型（联合、元组、基础类型等）
接口支持声明合并（多次定义自动合并），类型别名不可重复定义
类可以通过implements实现接口，但不能实现类型别名

2. 关键区别场景（技术考察重点）

(1) 声明合并（Interface Merging）

// 第一次声明
interface Window {
  title: string;
}

// 第二次声明（自动合并）
interface Window {
  width: number;
}

// 最终合并结果
const win: Window = {
  title: "My App",
  width: 1024
};

// 类型别名重复定义会报错
type Size = { width: number };  // Error: Duplicate identifier
type Size = { height: number }; // 此处编译报错

实际应用场景：扩展第三方库的类型声明（常见于.d.ts文件）

(2) 扩展方式差异

// 接口继承（extends）
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

// 类型别名交叉类型（&）
type Animal = { name: string };
type Dog = Animal & { breed: string };

// 联合类型只能通过type实现
type Result = Success | Error;  // type特有语法

(3) 类实现差异

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

// 正确实现接口
class DigitalClock implements ClockInterface {
  currentTime = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
}

// 类型别名无法被类实现（编译报错）
type ClockType = {
  currentTime: Date;
  setTime(d: Date): void;
};

class AnalogClock implements ClockType { // Error: 只能实现接口
  // ... 
}

3. 性能与编译差异（高级知识点）

类型运算处理：

// 接口的extends运算更高效
interface A { x: number }
interface B extends A { y: string }

// 类型别名的交叉类型可能更复杂
type C = { x: number } & { y: string };

// 深层嵌套时的性能差异（实测数据参考）
type DeepType<T> = T extends object 
  ? { [K in keyof T]: DeepType<T[K]> } 
  : T;

interface DeepInterface {
  child: DeepInterface;
}

实际影响：在超大型项目中（5万行以上），复杂类型别名可能增加0.5-1秒编译时间

4. 日常开发最佳实践（工程化建议）

(1) 对象类型定义规范

// 推荐优先使用接口的场景：
// 1. 需要被类实现的契约
// 2. 需要声明合并的扩展场景
interface APIResponse {
  code: number;
  data: unknown;
}

// 推荐使用类型别名的场景：
// 1. 联合类型/元组类型
// 2. 复杂类型组合
type UserRole = 'admin' | 'user' | 'guest';
type Coordinates = [number, number];

(2) 团队协作规范

// 项目规范示例：
// - 核心业务对象统一使用interface（便于扩展）
// - 工具类型使用type alias（如Partial、Omit等）
// - 避免混用导致认知负担

// 错误示范（混合使用导致混淆）
interface User {
  id: number;
}

type User = {  // Error: Duplicate identifier
  name: string;
};

(3) 类型复用策略

// 接口扩展示例
interface BaseEntity {
  id: number;
  createdAt: Date;
}

interface User extends BaseEntity {
  name: string;
}

// 类型别名组合示例
type WithAudit<T> = T & {
  createdBy: string;
  updatedAt: Date;
};

type Product = WithAudit<{
  price: number;
  sku: string;
}>;

5. 常见误区与坑点（避坑指南）

(1) 函数类型定义差异

// 接口定义函数类型（可行但不推荐）
interface SearchFunc {
  (source: string, keyword: string): boolean;
}

// 类型别名更直观
type SearchFunc = (source: string, keyword: string) => boolean;

// 类实现函数接口的陷阱
interface Callback {
  (): void;
}

class MyClass implements Callback { // 需要实例方法
  callback() {} // Error: 未正确实现函数接口
}

(2) 索引签名处理

// 接口的索引签名
interface StringArray {
  [index: number]: string;
}

// 类型别名等价写法
type StringArray = {
  [index: number]: string;
};

// 特殊场景：接口允许混合类型
interface HybridInterface {
  [key: string]: number;
  name: string; // Error: 必须符合索引签名
}

(3) 类型推断差异

interface Box {
  content: string;
}

type BoxType = {
  content: string;
};

// 看似相同实则类型系统记录不同
const a: Box = { content: 'text' };
const b: BoxType = a; // 允许赋值（结构类型系统）

// 但当涉及字面量类型时：
interface Branded { brand: 'unique' }
type BrandedType = { brand: 'unique' }

let x: Branded = { brand: 'unique' };
let y: BrandedType = x; // 仍然兼容

6. 高级技巧应用（专家级建议）

(1) 条件类型配合

// 类型别名支持条件类型（接口无法实现）
type TypeName<T> = T extends string ? "string" :
  T extends number ? "number" :
  "object";

// 条件类型与接口结合使用
interface ResponseWrapper<T extends string | number> {
  data: T;
  type: TypeName<T>;
}

(2) 映射类型操作

// 接口无法直接使用映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 但可以通过继承实现
interface ReadonlyUser extends Readonly<User> {}

(3) 递归类型定义

// 类型别名支持递归
type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [key: string]: Json };

// 接口递归需要间接引用
interface TreeNode {
  value: number;
  children: TreeNode[];
}