Ein einfacher Vergleich, um den Unterschied zwischen Schnittstelle und Typ in TypeScript zu erkennen

Was ist der Unterschied zwischen Schnittstelle und Typ? In diesem Artikel werden Schnittstelle und Typ in TypeScript verglichen, Sie werden über den Unterschied zwischen Schnittstelle und Typ informiert und es wird vorgestellt, welche Schnittstelle Sie bei der tatsächlichen Verwendung auswählen sollten!

Wenn wir TypeScript verwenden, verwenden wir interface und type. Normalerweise scheint es, dass ihre Verwendung gleich ist und beide sehr unterschiedlich sind gut, daher ist es selten, den Unterschied zwischen ihnen wirklich zu verstehen. Wir haben Typen entwickelt, die oft so definiert sind: 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];

oder so:

interface Point {
  coordinates: [number, number]
}

Der Unterschied zwischen interface und type ist mehr als nur eine geringfügige Syntaxdeklaration . Heute werfen wir einen Blick auf die verborgenen Geheimnisse dieser beiden Typen.

Typen und Typaliase

TypeScript verfügt über Grundtypen wie boolean, number und string. Wenn wir Typen höherer Ebene deklarieren möchten, müssen wir

Typaliase

verwenden.

Typ-Aliasing bezieht sich auf die Erstellung eines neuen Namens für einen Typ.

Es ist zu beachten, dass

wir keinen neuen Typ definieren. Die Verwendung des Schlüsselworts type mag so aussehen, als würden wir einen neuen Typ erstellen, aber wir geben einem Typ lediglich einen neuen Namen.

Wenn wir also Typ verwenden, erstellen wir keine neue Kategorie, sondern definieren lediglich einen Alias ​​​​des Typs.

Schnittstelle

🎜🎜Im Gegensatz zu type ist die Schnittstelle auf Objekttypen beschränkt. Sie sind eine Möglichkeit, Objekte und ihre Eigenschaften zu beschreiben. Typaliasdeklarationen können für jeden primitiven Typ, jede Union oder jeden Schnittpunkt verwendet werden. 🎜In dieser Hinsicht sind Schnittstellen auf Objekttypen beschränkt🎜. 🎜🎜🎜Ähnlichkeiten zwischen Schnittstelle und Typ🎜🎜🎜Bevor wir ihre Unterschiede diskutieren, werfen wir einen Blick auf ihre Ähnlichkeiten. 🎜

🎜Beide können vererbt werden🎜

🎜Sowohl Schnittstelle als auch Typ können vererbt werden. Beachten Sie außerdem, dass sich Schnittstellen und Typaliase nicht gegenseitig ausschließen. Typaliase können Schnittstellen erben und umgekehrt. 🎜🎜Erweitern Sie für eine Schnittstelle eine andere Schnittstelle 🎜rrreee🎜 Oder erweitern Sie einen Typ 🎜rrreee🎜Der Typ erbt einen anderen Typ: 🎜rrreee🎜Oder erweitern Sie eine Schnittstelle: 🎜rrreee

🎜implementation🎜

🎜class Kann Implementieren Sie sowohl Schnittstellen als auch Typen (TS 2.7+). Allerdings können Klassen keine Union-Typen implementieren. 🎜rrreee🎜🎜Der Unterschied zwischen Schnittstelle und Typ🎜🎜

🎜Vereinigungs- und Schnittmengentypen🎜

🎜Schnittstellen können zwar erweitert und zusammengeführt werden, sie können jedoch nicht in Form von Vereinigungen und Schnittmengen miteinander kombiniert werden. Typen können Vereinigungs- und Schnittpunktoperatoren verwenden, um neue Typen zu bilden. 🎜rrreee

🎜Declaration Merging🎜

🎜Der TypeScript-Compiler führt zwei oder mehr Schnittstellen mit demselben Namen zusammen. Dies funktioniert nicht mit Typen. Wenn wir versuchen, zwei Typen mit demselben Namen, aber unterschiedlichen Eigenschaften zu erstellen, gibt der TypeScript-Compiler einen Fehler aus. 🎜rrreee

🎜Tupeltyp🎜

🎜Tupel (Schlüssel-Wert-Paare) können nur über das Schlüsselwort type definiert werden. 🎜rrreee🎜 Es ​​gibt keine Möglichkeit, ein Tupel über eine Schnittstelle zu deklarieren. Allerdings können wir Tupel innerhalb von Schnittstellen verwenden🎜rrreee🎜🎜Welches sollten wir verwenden? 🎜🎜🎜Generell sind Schnittstellen und Typen sehr ähnlich. 🎜🎜Für öffentliche API-Definitionen in Bibliotheken oder Typdefinitionen von Drittanbietern sollten Schnittstellen verwendet werden, um Funktionen zum Zusammenführen von Deklarationen bereitzustellen. Ansonsten können wir verwenden, was wir wollen, aber es sollte in der gesamten Codebasis konsistent sein. 🎜🎜🎜Englische Originaladresse: https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/🎜🎜Autor: SARANSH KATARIA🎜🎜🎜Mehr für Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEin einfacher Vergleich, um den Unterschied zwischen Schnittstelle und Typ in TypeScript zu erkennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!