interface和type的区别

最新推荐文章于 2024-08-12 09:00:04 发布

胆小小鬼

最新推荐文章于 2024-08-12 09:00:04 发布

阅读量417

点赞数 11

文章标签：开发语言 typescript 前端

本文链接：https://blog.csdn.net/qq_51389038/article/details/135439684

版权

本文比较了JavaScript中的接口和类型别名，阐述了它们在描述对象和函数类型的语法差异，以及各自的扩展方式，包括接口的继承和类型别名的交叉类型应用。

摘要由CSDN通过智能技术生成

两者都可以用来描述对象或函数的类型，但是语法不同。

Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

Type

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

两者的扩展方式不同，但并不互斥。接口可以扩展类型别名，同理，类型别名也可以扩展接口。

接口的扩展就是继承，通过 extends 来实现。类型别名的扩展就是交叉类型，通过 & 来实现。

接口扩展接口

interface PointX {
    x: number
}

interface Point extends PointX {
    y: number
}

类型别名扩展类型别名

type PointX = {
    x: number
}

type Point = PointX & {
    y: number
}

接口扩展类型别名

type PointX = {
    x: number
}
interface Point extends PointX {
    y: number
}

类型别名扩展接口

interface PointX {
    x: number
}
type Point = PointX & {
    y: number
}

关注