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；

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