Type aliassen versus interfaces

In TypeScript kunnen we de structuur van complexe objecten op twee manieren definiëren: door Interfaces (interface) of Type Aliassen (type) te gebruiken. Beide dienen om de ‘vorm’ van een object of datastructuur te beschrijven, maar ze hebben een paar fundamentele verschillen.

Interfaces (interface)

Een interface definieert een contract voor de structuur van een object. Het is de standaardtool om objectvormen en publieke API’s op een uitbreidbare manier te beschrijven.

interface Book {
  title: string;
  pages: number;
  author?: string; // Optional property (can be omitted)
}

const myBook: Book = {
  title: 'The Lord of the Rings',
  pages: 1200,
};

Het vraagteken (?) markeert een eigenschap als optioneel. Het object myBook is geldig, zelfs als de eigenschap author wordt weggelaten.

Type aliassen (type)

Met een typealias kunt u een nieuwe naam koppelen aan elk bestaand type, inclusief primitieve typen, unies, tupels of volledige objectstructuren.

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

const coordinates: Point = { x: 10, y: 20 };

Belangrijkste verschillen: samenvoegen van uitbreidingen en aangiften

Hoewel interface en type uitwisselbaar zijn voor de meeste gewone gebruikssituaties, vertonen ze twee cruciale verschillen:

1. Uitbreidbaarheid (overerving)

Interfaces worden uitgebreid met het trefwoord extends:

interface User {
  username: string;
}

interface Admin extends User {
  privileges: string[];
}

Type-aliassen kunnen niet worden uitgebreid met extends, maar ze kunnen wel worden gecombineerd met de operator intersection (&):

type User = {
  username: string;
};

type Admin = User & {
  privileges: string[];
};

2. Samenvoeging van aangiften

Meerdere interfaces met dezelfde naam in hetzelfde bereik worden automatisch samengevoegd door de compiler:

interface User {
  name: string;
}
interface User {
  email: string;
}
// Now User has both 'name' and 'email'!

Dit gedrag wordt niet ondersteund door type-aliassen: het tweemaal declareren van dezelfde type zal een compileerfout veroorzaken.

Probeer het zelf

Oefening 1: Gebruikersinterface

Oefening 2: Point2D-typealias

Oefening 3: Interfaces uitbreiden

Oefening 4: Serverconfiguratie