面试官提问：TypeScript 中的 Type 和 Interface 有什么区别？

两者的共同点

1、interface 和 type 都可以用来声明一个对象

interface 声明对象

js 复制代码

interface UserInterFace {
  name: string;
  age: number;
  getName: () => string
}

const user: UserInterFace = {
  name: 'xx',
  age: 20,
  getName() { return 'xx' }
}

type 声明对象

js 复制代码

type UserType = {
  name: string;
  age: number;
  getName: () => string;
}

const user: UserType = {
  name: 'xx',
  age: 20,
  getName() { return 'xx' }
}

2、interface 和 type 都可以被 class 实现

interface 声明对象，被 class 实现

js 复制代码

interface UserInterFace {
  name: string;
  age: number;
  getName: () => string
}

class User implements UserInterFace {
  name: string;
  age: number;
  getName: () => string;
}

type 声明对象，被 class 实现

js 复制代码

type UserType = {
  name: string;
  age: number;
  getName: () => string;
}

class User implements UserInterFace {
  name: string;
  age: number;
  getName: () => string;
}

3、interface 和 type 都可以被扩展

interface 扩展 interface 和 type

js 复制代码

interface User1 { name: string } // 扩展 interface
type User1 = { name: string } // 扩展 type


interface User2 extends User1 { age: number } 
const u2: User2 = { name: 'xxx', age: 12 }

type 扩展 type 和 interface

js 复制代码

type T1 = { name: string } // 扩展 type
interface T1 = { name: string } // 扩展 interface

type T3 = T1 & {
   age: number
}; 

const obj2: T3 = { name: 'xxx', age: 123 }

两者的不同点

1、type 可以声明基础类型

js 复制代码

type name = string
const str1: name = 'xxx'; // 合法
const str2: name = 12; // 不合法

2、type 可以声明联合类型、交叉类型

js 复制代码

type T1 = { name: string }
type T2 = { age: number }

type T3 = T1 | T2; // 联合类型
type T4 = T1 & T2; // 交叉类型
const obj1: T3 = { name: 'xxx' }
const obj2: T4 = { name: 'xxx', age: 123 }

变种：interface 可以参与到 联合类型 或 交叉类型

js 复制代码

type T1 = { name: string }
interface T2 { age: number }

type T3 = T1 | T2; // 联合类型
type T4 = T1 & T2; // 交叉类型
const obj1: T3 = { name: 'xxx' }
const obj2: T4 = { name: 'xxx', age: 123 }

3、interface 可以重复声明

interface：支持 ‌声明合并 ‌：多次声明同名 interface 会自动合并‌

typescript 复制代码

interface User { name: string; }
interface User { age: number; }
// 合并为 { name: string; age: number; }

type：不支持声明合并‌：重复定义同名 type 会报错‌

typescript 复制代码

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

4、implements 实现的不同

interface：类可以直接通过 implements 实现一个 interface

typescript 复制代码

class Admin implements User { /* ... */ }

type 如果 type 定义的是 ‌对象类型或函数签名‌，类也可以实现

typescript 复制代码

type UserType = { name: string };
class Admin implements UserType { /* 合法 */ }

type MixedType = string | number;
class Foo implements MixedType {} // Error

5、对于复杂类型的支持程度

type：可处理 ‌联合类型 ‌、‌交叉类型 ‌、‌元组 ‌ 等复杂类型，且支持工具类型操作（如 Partial、Pick）‌

typescript 复制代码

type ErrorCode = string | number;
type PartialUser = Partial<User>;

interface‌：无法直接定义联合类型或元组，需通过组合其他类型实现‌

如何选择

优先使用interface：当需要 ‌声明对象类型 ‌ 或 ‌利用声明合并‌ 特性时。
优先使用 ‌type：当需要定义 ‌联合类型、元组、工具类型 ‌ 或 ‌复杂类型操作‌ 时