Typescript : Interfaces et types

Question

Quelle est la différence entre ces déclarations (interface vs type) ?

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};

Answer 1

Les réponses actuelles et les documentation officielle sont dépassées. Et pour les novices de TypeScript, la terminologie utilisée n'est pas claire sans exemples. Vous trouverez ci-dessous une liste des différences les plus récentes.

1. Objets / Fonctions

Tous deux peuvent être utilisés pour décrire la forme d'un objet ou la signature d'une fonction. Mais la syntaxe diffère.

Interface

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

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

Type d'alias

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

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

2. Autres types

Contrairement à une interface, l'alias de type peut également être utilisé pour d'autres types tels que les primitives, les unions et les tuples.

// primitive
type Name = string;

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

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

3. Étendre le site

Les deux peuvent être étendus, mais là encore, la syntaxe diffère. En outre, notez qu'une interface et un alias de type ne sont pas mutuellement exclusifs. Une interface peut étendre un alias de type, et vice versa.

L'interface s'étend à l'interface

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

Type alias étend le type alias

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

L'interface étend le type alias

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

Type alias étend l'interface

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

4. Met en œuvre

Une classe peut implémenter une interface ou un alias de type, tous deux de la même manière. Notez cependant qu'une classe et une interface sont considérées comme des blueprints statiques. Par conséquent, elles ne peuvent pas implémenter/étendre un alias de type qui nomme un type d'union.

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

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

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

class SomePoint2 implements Point2 {
  x: 1;
  y: 2;
}

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

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x: 1;
  y: 2;
}

5. Fusion des déclarations

Contrairement à un alias de type, une interface peut être définie plusieurs fois et sera traitée comme une seule interface (les membres de toutes les déclarations étant fusionnés).

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

Answer 2

Conformément à la Spécification du langage TypeScript :

Contrairement à une déclaration d'interface, qui introduit toujours un type d'objet nommé, une déclaration d'alias de type peut introduire un nom pour tout type de type, y compris les types primitifs, d'union et d'intersection.

Le cahier des charges poursuit en mentionnant :

Les types d'interface présentent de nombreuses similitudes avec les alias de type pour les littéraux de type objet. d'objets, mais comme les types d'interface offrent plus de possibilités, ils sont généralement préférés aux alias de type. Par exemple, le type d'interface

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

pourrait être écrit comme l'alias de type

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

Cependant, cela signifie que les capacités suivantes sont perdues :

• Une interface peut être nommée dans une clause extends ou implements, mais pas un alias de type pour un littéral de type d'objet.
• Une interface peut avoir plusieurs déclarations fusionnées, mais pas un alias de type pour un littéral de type objet.

Answer 3

https://www.typescriptlang.org/docs/handbook/advanced-types.html

Une différence est que les interfaces créent un nouveau nom qui est utilisé partout. Les alias de type ne créent pas de nouveau nom - par exemple, les messages d'erreur n'utiliseront pas le nom de l'alias.