乐趣区

关于前端:使用-TypeScript-常见困惑interface-和-type-的区别是什么

jiezi

作者：SARANSH KATARIA
译者：前端小智
起源：wisdomgeek

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

当咱们应用 TypeScript 时，就会用到 interface 和 type，平时感觉他们用法如同是一样的，没啥区别，都能很好的应用，所以也很少去真正的了解它们之间到底有啥区别。咱们开发过常常或这么来定义类型：

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

或者这样定义：

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

interface 和 type之间的差别不仅仅是主要语法申明。那么，明天咱们就来看看这两家伙之间存在啥不可告人的机密。

类型和类型别名

TypeScript 有 boolean、number、string 等根本类型。如果咱们想申明高级类型，咱们就须要应用 类型别名。

类型别名指的是为类型创立新名称。须要留神的是 ，咱们并没有定义一个新类型。应用type 关键字可能会让咱们感觉是创立一个新类型，但咱们只是给一个类型一个新名称。

所以咱们所以 type 时，不是在创立新的类别，而是定义类型的一个别名而已。

接口

与 type相同，接口仅限于对象类型。它们是形容对象及其属性的一种形式。类型别名申明可用于任何基元类型、联结或交加。在这方面，接口被限度为对象类型。

interface 和 type 的相似之处

在探讨它们的区别之前，咱们先来看看它们的相似之处。

两者都能够被继承

interface 和 type 都能够继承。另一个值得注意的是，接口和类型别名并不互斥。类型别名能够继承接口，反之亦然。

对于一个接口，继承另一个接口

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

或者，继承一个类型

type PartialPointX = {x: number;};
interface Point extends PartialPointX {y: number;}

类型继承另一个类型：

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

或者，继承一个接口：

interface PartialPointX {x: number;}
type Point = PartialPointX & {y: number;};

实现

类能够实现接口以及类型（TS 2.7+）。然而，类不能实现联结类型。

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

class SomePoint implements Point {
 x = 1;
 y = 2;
}

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

class SomePoint2 implements AnotherPoint {
 x = 1;
 y = 2;
}

type PartialPoint = {x: number;} | {y: number;};

// Following will throw an error
class SomePartialPoint implements PartialPoint {
 x = 1;
 y = 2;
}

interface 和 type 的区别

并集和交加类型

尽管接口能够被扩大和合并，但它们不能以联结和交加的模式组合在一起。类型能够应用联结和交加操作符来造成新的类型。

// object
type PartialPointX = {x: number;};
type PartialPointY = {y: number;};

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交加
type PartialPoint = PartialPointX & PartialPointY;

申明合并

TypeScript 编译器合并两个或多个具备雷同名称的接口。这不适用于类型。如果咱们尝试创立具备雷同名称但不同的属性的两种类型，则 TypeScript 编译器将抛出谬误。

// These two declarations become:
// interface Point {x: number; y: number;}
interface Point {x: number;}
interface Point {y: number;}

const point: Point = {x: 1, y: 2};

元组类型

元组 (键值对) 只能通过 type 关键字进行定义。

type Point = [x: number, y: number];

没有方法应用接口申明元组。不过，咱们能够在接口外部应用元组

interface Point {coordinates: [number, number]
}

咱们应该应用哪一个？

一般来说，接口和类型都十分类似。

对于库或第三方类型定义中的公共 API 定义，应应用接口来提供申明合并性能。除此之外，咱们喜爱用哪个就用哪个，然而在整个代码库中应该要放弃一致性。

~ 完，我是小智，我去教前端小妹妹了。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://www.wisdomgeek.com/de…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版