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

两者的共同点

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

interface 声明对象

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

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

type 声明对象

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

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

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

interface 声明对象,被 class 实现

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

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

type 声明对象,被 class 实现

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

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

3、interface 和 type 都可以被扩展

interface 扩展 interface 和 type

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

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

type T3 = T1 & {
   age: number
}; 

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

两者的不同点

1、type 可以声明基础类型

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

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

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 可以参与到 联合类型交叉类型

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 会自动合并‌

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

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

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

4、implements 实现的不同

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

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

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

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

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

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

type:可处理 ‌联合类型‌、‌交叉类型‌、‌元组‌ 等复杂类型,且支持工具类型操作(如 PartialPick)‌

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

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

如何选择

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岁月可贵

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值