TypeScript-Objekte einfach erklärt für Anfänger

Objekte sind ein grundlegender Bestandteil von JavaScript und TypeScript. Sie ermöglichen es Ihnen, verwandte Daten und Funktionen zu gruppieren und bieten so eine Möglichkeit, reale Entitäten in Ihrem Code zu modellieren. TypeScript erweitert JavaScript-Objekte mit Typsicherheit, wodurch Ihr Code vorhersehbarer und einfacher zu warten ist. Dieser Leitfaden vereinfacht das Konzept von TypeScript-Objekten für Anfänger.

Was ist ein Objekt in TypeScript?

Ein Objekt ist eine Sammlung von Schlüssel-Wert-Paaren, wobei die Schlüssel Zeichenfolgen (oder Symbole) sind und die Werte von jedem beliebigen Typ sein können. In TypeScript können Sie die Form eines Objekts mithilfe von Typen oder Schnittstellen definieren und so sicherstellen, dass das Objekt einer bestimmten Struktur folgt.

Definieren einfacher Objekte in TypeScript

Beginnen wir mit der Definition eines einfachen Objekts in TypeScript. Dies ähnelt der Art und Weise, wie Sie Objekte in JavaScript definieren, bietet jedoch den zusätzlichen Vorteil der Typensicherheit.

Beispiel für ein Basisobjekt

So definieren Sie ein einfaches Objekt in TypeScript:

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

In diesem Beispiel hat das Objekt person zwei Eigenschaften: name (vom Typ string) und age (vom Typ number). TypeScript stellt sicher, dass das Objekt dieser Struktur entspricht.

Verwenden von Schnittstellen zum Definieren der Objektstruktur

Eine Schnittstelle ist eine leistungsstarke Funktion in TypeScript, die die Form eines Objekts definiert. Schnittstellen bieten eine Möglichkeit, Verträge in Ihrem Code zu definieren und sicherzustellen, dass Objekte einer bestimmten Struktur entsprechen.

Definieren einer Schnittstelle

So verwenden Sie eine Schnittstelle, um die Struktur eines Objekts zu definieren:

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

In diesem Beispiel definiert die Schnittstelle Person die Struktur eines Personenobjekts. Die Variable person muss dieser Struktur entsprechen, sonst gibt TypeScript einen Fehler aus.

Optionale Eigenschaften in Objekten

Mit TypeScript können Sie optionale Eigenschaften in Objekten mithilfe des Symbols ? definieren. Optionale Eigenschaften können beim Erstellen von Objekten weggelassen werden, was Ihnen Flexibilität bei der Definition von Objektstrukturen bietet.

Beispiel mit optionalen Eigenschaften

Hier ist ein Beispiel, bei dem die Eigenschaft phoneNumber optional ist:

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

In diesem Beispiel hat employee1 keine phoneNumber-Eigenschaft, während employee2 eine hat. Beide sind gemäß der Employee-Schnittstelle gültig.

Schreibgeschützte Eigenschaften in Objekten

Mit TypeScript können Sie Eigenschaften schreibgeschützt machen, sodass sie nach der Erstellung des Objekts nicht mehr geändert werden können. Dies ist nützlich zum Erstellen unveränderlicher Objekte.

Beispiel mit schreibgeschützten Eigenschaften

So definieren Sie schreibgeschützte Eigenschaften:

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

In diesem Beispiel ist die Eigenschaft brand als readonly gekennzeichnet. Jeder Versuch, sie zu ändern, führt zu einem Kompilierungsfehler.

Verschachtelte Objekte in TypeScript

TypeScript-Objekte können verschachtelt werden, was bedeutet, dass ein Objekt ein anderes Objekt als Eigenschaft enthalten kann. Dies ist bei komplexen Datenstrukturen üblich.

Beispiel für verschachtelte Objekte

Hier ist ein Beispiel für ein verschachteltes Objekt:

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

In diesem Beispiel verfügt die Schnittstelle User über ein verschachteltes Objekt Address. Das Objekt user folgt dieser Struktur und ermöglicht den Zugriff auf verschachtelte Eigenschaften.

Abschluss

Objekte in TypeScript sind aufgrund von Typdefinitionen, optionalen Eigenschaften, schreibgeschützten Eigenschaften und verschachtelten Strukturen leistungsfähiger und flexibler als einfache JavaScript-Objekte. Indem Sie Objekte mithilfe von Schnittstellen definieren, können Sie robusteren und fehlerfreien Code erstellen. Beginnen Sie mit der Verwendung von TypeScript-Objekten in Ihren Projekten, um die volle Leistungsfähigkeit der Typsicherheit und strukturierter Daten zu nutzen.