TS中 type 和 interface 的区别

272 阅读1分钟

区别点 | interface | type |

| 1 | 扩展方式 | 用 extends 继承对象 | 用 & 交叉类型组合
| 2 | 是否可重复定义 | ✅ 支持多次声明,会自动合并 | ❌ 不可重复定义
| 3 | 函数和元组的定义方式 | 语法偏门(尤其是函数) 更直观、适合函数和元组
| 4 | 可表达的类型范围 | 仅限对象类型 | 通吃:基本类型、联合、对象、元组等

  1. 扩展方式不同
// interface 继承
interface A { x: number; }
interface B extends A { y: number; }

// type 交叉
type A2 = { x: number };
type B2 = A2 & { y: number };

  1. interface 可重复定义,type 不行
// interface 会自动合并
interface User {
  name: string;
}
interface User {
  age: number;
}
// 现在 User = { name: string; age: number }

// type 定义重复会炸
type User2 = { name: string };
// ❌ error: Duplicate identifier
// type User2 = { age: number };

  1. 函数与元组定义方式不同
// 函数
type FnType = (msg: string) => void;

interface FnInterface {
  (msg: string): void;
}

// 元组(只能用 type)
type Point = [number, number];
// ❌ interface 不支持元组

  1. interface 只玩对象,type 能玩一切
// interface OK
interface Obj { name: string; }

// ❌ interface 无法这样写:
// interface X extends string | number {}  // 报错

// type 能搞原始类型、联合类型、对象、元组等
type Str = string;
type Union = string | number;
type Obj2 = { name: string };
type Coord = [number, number];