Interfaces en objecttypes
Beschrijf de structuur van objecten met interface en type, breid interfaces uit, gebruik optionele eigenschappen met ? en readonly voor onveranderlijkheid.
Interfaces en objecttypes is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
interface versus type
Zowel interface als type beschrijven de vorm van objecten. Het belangrijkste verschil: koppelvlakken kunnen worden samengevoegd (declaratief samenvoegen) en hebben over het algemeen de voorkeur voor het definiëren van vormen van openbare API's. Type-aliases zijn flexibeler voor complexe typen.
// interface:
interface User {
id: number;
name: string;
}
// type alias (equivalent for objects):
type User = {
id: number;
name: string;
};Een koppelvlak definiëren
Gebruik interface om de vorm van een object te definiëren. Alle eigenschappen zijn standaard verplicht. Scheid eigenschappen met puntkomma's.
interface Product {
id: number;
name: string;
price: number;
description: string;
inStock: boolean;
category: string;
}Optionele en alleen-lezen eigenschappen
Markeer eigenschappen als optioneel met ?. Gebruik readonly om wijzigingen te voorkomen. Readonly dwingt onveranderlijkheid af tijdens het compileren.
interface Config {
host: string;
port?: number; // optional: number | undefined
readonly apiKey: string; // can't change after assignment
}
const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080; // OK
config.apiKey = 'new'; // Error: readonlyKoppelvlakken uitbreiden
Gebruik extends om een nieuw koppelvlak te maken dat alle eigenschappen van een ander koppelvlak bevat. Meervoudige overerving wordt ondersteund.
interface Animal {
name: string;
sound(): string;
}
interface Dog extends Animal {
breed: string;
fetch(): void;
}
interface ServiceDog extends Dog {
task: string;
}Indexhandtekeningen — dynamische sleutels
Wanneer je vooraf de namen van eigenschappen niet kent, maar wel hun waardetypen, gebruik je een indexhandtekening.
interface StringMap {
[key: string]: string;
}
const headers: StringMap = {
'Content-Type': 'application/json',
'Authorization': 'Bearer token123'
};
// Also for translating:
interface Translations {
[locale: string]: { [key: string]: string };
}Functietypen in koppelvlakken
Definieer methodesignaturen binnen een koppelvlak — zowel de verkorte als de volledige syntaxis voor eigenschappen werkt.
interface Logger {
log(message: string): void;
warn(message: string): void;
error(message: string, err?: Error): void;
}
// Also valid:
interface Logger2 {
log: (message: string) => void;
}Koppelvlakken implementeren in klassen
Een klasse kan een of meer koppelvlakken implement. TypeScript controleert of de klasse alle vereiste leden levert.
interface Serialisable {
serialise(): string;
deserialise(data: string): this;
}
class User implements Serialisable {
constructor(public name: string) {}
serialise() { return JSON.stringify({ name: this.name }); }
deserialise(data: string) {
const obj = JSON.parse(data);
return new User(obj.name) as this;
}
}Declaraties samenvoegen
Meerdere interface-declaraties met dezelfde naam worden samengevoegd tot één declaratie. Dit is handig om typen van derden uit te breiden. Type-aliases ondersteunen dit niet.
interface Window {
myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhereGeneste objecttypen
Eigenschappen van koppelvlakken kunnen zelf objecttypen hebben — inline of via een verwijzing naar een ander koppelvlak.
interface Order {
id: string;
customer: {
name: string;
email: string;
};
items: Array<{
productId: string;
quantity: number;
price: number;
}>;
total: number;
}Structurele typering — eendentypering
TypeScript gebruikt structurele typering: een waarde voldoet aan een type als deze ten minste de vereiste eigenschappen heeft. Expliciete implementatie is niet nodig. Elk object met de juiste vorm is compatibel.
interface Named {
name: string;
}
function greet(obj: Named) {
console.log(`Hello, ${obj.name}!`);
}
// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name propertyOnderscheiden unies met koppelvlakken
Voeg een discriminerende eigenschap met een letterlijk type toe om varianten in een unie van elkaar te onderscheiden. TypeScript beperkt het type in switch/if op basis van deze discriminator.
interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;
function area(shape: Shape): number {
switch (shape.kind) {
case 'circle': return Math.PI * shape.radius ** 2;
case 'square': return shape.side ** 2;
}
}Korte controle
Wat is het belangrijkste verschil tussen interface en type in TypeScript?
Samenvatting: koppelvlakken
interface beschrijft de vorm van objecten met verplichte, optionele en alleen-lezen eigenschappen. Breid koppelvlakken uit met extends. Indexhandtekeningen zijn bedoeld voor dynamische sleutels. Klassen implementeren koppelvlakken. Het samenvoegen van declaraties is uniek voor koppelvlakken. TypeScript gebruikt structurele typering — de vorm is belangrijk, niet de expliciete declaratie.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Interfaces en objecttypes” gratis?
Ja — de volledige tekst van “Interfaces en objecttypes” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Interfaces en objecttypes”?
Beschrijf de structuur van objecten met interface en type, breid interfaces uit, gebruik optionele eigenschappen met ? en readonly voor onveranderlijkheid. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Interfaces en objecttypes”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Waarom TypeScript: types vangen fouten tijdens het compileren
- Primitieve types unions en type aliases
- Interfaces en objecttypes
- TS compileren en tsconfig.json