Lektionen des Moduls (1/2)
Type Aliases vs. Interfaces
In TypeScript können wir die Struktur komplexer Objekte auf zwei Arten definieren: über Interfaces (interface) oder über Typ-Alias (type). Beide dienen dazu, die "Form" eines Objekts oder einer Datenstruktur zu beschreiben, weisen jedoch einige grundlegende Unterschiede auf.
Interfaces (interface)
Ein Interface definiert einen Vertrag für die Struktur eines Objekts. Es ist das Standardwerkzeug zur erweiterbaren Beschreibung der Form von Objekten und APIs.
interface Book {
title: string;
pages: number;
author?: string; // Proprietà opzionale (può essere omessa)
}
const myBook: Book = {
title: 'Il Signore degli Anelli',
pages: 1200,
};Das Fragezeichen (?) markiert eine Eigenschaft als optional. Das Objekt myBook ist auch dann gültig, wenn die Eigenschaft author weggelassen wird.
Typ-Alias (type)
Ein Typ-Alias ermöglicht es, einem beliebigen existierenden Typ einen neuen Namen zuzuweisen, einschließlich primitiver Typen, Unions, Tupel oder ganzer Objektstrukturen.
type Point = {
x: number;
y: number;
};
const coordinates: Point = { x: 10, y: 20 };Wichtige Unterschiede: Erweiterung und Declaration Merging
Obwohl interface und type für die meisten gewöhnlichen Anwendungsfälle austauschbar sind, weisen sie zwei entscheidende Unterschiede auf:
1. Erweiterbarkeit (Vererbung)
Interfaces werden mit dem Schlüsselwort extends erweitert:
interface User {
username: string;
}
interface Admin extends User {
privileges: string[];
}Typ-Alias können nicht mit extends erweitert werden, können aber mithilfe der Schnittmenge (Intersection, &) kombiniert werden:
type User = {
username: string;
};
type Admin = User & {
privileges: string[];
};2. Declaration Merging (Zusammenführen von Deklarationen)
Mehrere Interfaces mit demselben Namen im selben Gültigkeitsbereich werden vom Compiler automatisch zusammengeführt:
interface User {
name: string;
}
interface User {
email: string;
}
// Ora User ha sia 'name' che 'email'!Dieses Verhalten wird von Typ-Aliasen nicht unterstützt: Die zweifache Deklaration desselben type führt zu einem Compilerfehler.
Probier es aus
Esercizio 1: Interface Benutzer
Definiere ein Interface namens User, das ein Benutzerobjekt beschreibt. Das Interface muss enthalten: id als Zahl, username als String und email als optionalen String.
Hinweis anzeigen
Verwende die Syntax email?: string, um es als optional zu kennzeichnen.
Lösung nach 3 Versuchen verfügbar
Esercizio 2: Typ-Alias Point2D
Erstelle ein Typ-Alias namens Point2D, das einen zweidimensionalen Punkt mit den Koordinaten x und y (beides Zahlen) darstellt.
Hinweis anzeigen
Verwende die Syntax type Point2D = { x: number; y: number; };
Lösung nach 3 Versuchen verfügbar
Esercizio 3: Erweiterung von Interfaces
Definiere ein Interface namens Product mit id (Zahl) und price (Zahl). Definiere anschließend ein Interface namens DiscountedProduct, das Product erweitert und eine optionale Eigenschaft namens discountCode (String) hinzufügt.
Hinweis anzeigen
Verwende extends Product, um die Felder zu erben, und füge discountCode?: string hinzu.
Lösung nach 3 Versuchen verfügbar
Esercizio 4: Serverkonfiguration
Definiere ein Typ-Alias namens ServerConfig, das ein Konfigurationsobjekt für einen Server darstellt. Es muss enthalten: host (String), port (Zahl) und useHttps als optionales boolesches Feld.
Hinweis anzeigen
Verwende die Syntax type ServerConfig = { host: string; port: number; useHttps?: boolean; }.
Lösung nach 3 Versuchen verfügbar