TS中 interface 和 type 的区别

前言

在 TS 的学习中,往往有个疑惑,使用类型别名 Type 和接口 interface 都能创建一个类型,那么他们的区别是什么呢,下面我将通过两者的异同点带领大家学习;

🥇 一、相同点

接口和类型别名都能给对象指定类型

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 为对象类型创建类型别名
type IPerson = {
  name: string
  age: number
  sayHi(): void
}

// 为联合类型创建类型别名
type NumStr = number | string

🥇 二、异同点

  • 接口只能给对象指定类型;
  • 类型别名可以为任意类型指定别名;
  • 接口可以通过 extends 关键字进行继承

如下所示,如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用;

interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
  z: number
}

解释:
以上使用 extends (继承)关键字实现了接口 Point3D 继承 Point2D
继承后,Point3D 就有了 Point2D 的所有属性和方法(此时,Point3D 同时有 x、y、z 三个属性);

🥇 写在最后

接口和类型别名在 TS 中是经常使用的两个定义类型的方式,大家一定要牢记他们的用法,当然在能使用 Type 的时候建议使用 Type;

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端小二哥

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值