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

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 !

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;
}

ou comme ceci :

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

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; }

Ou, étendre un type

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

Un type étendre un autre type :

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

Ou, étendre un type Interface :

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

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;
}

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;

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 };

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];

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]
}

à 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!