Maison > interface Web > js tutoriel > Une comparaison simple pour voir la différence entre l'interface et le type dans TypeScript

Une comparaison simple pour voir la différence entre l'interface et le type dans TypeScript

青灯夜游
Libérer: 2021-06-30 10:06:16
avant
2194 Les gens l'ont consulté

Quelle est la différence entre l'interface et le type ? Cet article comparera l'interface et le type dans TypeScript, vous fera connaître la différence entre l'interface et le type et vous présentera lequel choisir en utilisation réelle !

Une comparaison simple pour voir la différence entre l'interface et le type dans TypeScript

Lorsque nous utiliserons TypeScript, nous utiliserons interface et type Il semble généralement que leur utilisation soit la même. Il n'y a pas de différence et ils sont tous les deux très. bonne utilisation, il est donc rare de vraiment comprendre la différence entre eux. Nous avons développé des types qui sont souvent définis comme ceci :

interface Point {
    x: number;
    y: number;
}
Copier après la connexion

ou comme ceci :

type Point = {
    x: number;
    y: number;
};
Copier après la connexion

La différence entre interface et type est plus qu'une simple déclaration de syntaxe mineure. Aujourd’hui, nous allons donc jeter un œil aux secrets cachés entre ces deux gars.

Types et alias de type

TypeScript a des types de base tels que boolean, number et string. Si nous voulons déclarer un type de niveau supérieur, nous devons utiliser un type alias.

L'alias de type fait référence à la création d'un nouveau nom pour un type. Il convient de noter que nous ne définissons pas un nouveau type. L'utilisation du mot-clé type peut donner l'impression que nous créons un nouveau type, mais nous donnons simplement un nouveau nom à un type.

Ainsi, lorsque nous utilisons le type, nous ne créons pas une nouvelle catégorie, mais définissons simplement un alias du type.

Interface

Contrairement à type, l'interface est limitée aux types d'objets. Ils sont une manière de décrire les objets et leurs propriétés. Les déclarations d'alias de type peuvent être utilisées pour n'importe quel type primitif, union ou intersection. À cet égard, les interfaces sont limitées aux types d'objets .

Similarités entre l'interface et le type

Avant de discuter de leurs différences, examinons leurs similitudes.

Les deux peuvent être hérités

L'interface et le type peuvent être hérités. Une autre chose à noter est que les interfaces et les alias de type ne s’excluent pas mutuellement. Les alias de type peuvent hériter des interfaces et vice versa.

Pour une interface, étendre une autre interface

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
Copier après la connexion

Ou, étendre un type

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
Copier après la connexion

Un type étendre un autre type :

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
Copier après la connexion

Ou, étendre un type Interface :

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
Copier après la connexion

implémente

les classes peuvent implémenter des interfaces ainsi que des types (TS 2.7+). Cependant, les classes ne peuvent pas implémenter de types d'union.

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;
}
Copier après la connexion

La différence entre l'interface et le type

Les types d'union et d'intersection

Bien que les interfaces puissent être étendues et fusionnées, elles ne peuvent pas être combinés dans des formulaires d'union et d'intersection. Les types peuvent utiliser des opérateurs d'union et d'intersection pour former de nouveaux types.

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

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交集
type PartialPoint = PartialPointX & PartialPointY;
Copier après la connexion

Fusion de déclarations

Le compilateur TypeScript fusionne deux ou plusieurs interfaces portant le même nom. Cela ne fonctionne pas avec les types. Si nous essayons de créer deux types avec le même nom mais des propriétés différentes, le compilateur TypeScript générera une erreur.

// 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 };
Copier après la connexion

Type de tuple

Les tuples (paires clé-valeur) ne peuvent être définis que via le mot-clé type.

type Point = [x: number, y: number];
Copier après la connexion

Il n'y a aucun moyen de déclarer un tuple à l'aide d'une interface. Cependant, nous pouvons utiliser le tuple

interface Point {
  coordinates: [number, number]
}
Copier après la connexion

à l'intérieur de l'interface. Lequel devons-nous utiliser ?

En général, les interfaces et les types sont très similaires.

Pour les définitions d'API publiques dans les bibliothèques ou les définitions de types tiers, les interfaces doivent être utilisées pour fournir une fonctionnalité de fusion de déclarations. En dehors de cela, nous pouvons utiliser ce que nous voulons, mais cela doit être cohérent dans l’ensemble de la base de code.

Adresse originale en anglais : https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/

Auteur : SARANSH KATARIA

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal