Zusammenfassung
Wenn ein Programm viele Dinge speichern muss, die zusammengehören — zum Beispiel Name, E-Mail und Passwort eines Nutzers — wird es unübersichtlich, alles in einzelnen Variablen zu halten. Klassen lösen dieses Problem: Sie fassen Daten (Attribute) und zugehörige Logik (Methoden) in einer Struktur zusammen. Ein Objekt ist eine konkrete Instanz einer Klasse. Mit Vererbung können Klassen voneinander erben, ohne Code zu duplizieren. Das ist das Kernprinzip der Objektorientierten Programmierung (OOP).
Schlüsselbegriffe
Klasse
Ein Bauplan für Objekte. Sie definiert, welche Attribute (Daten) und Methoden (Funktionen) ein Objekt des Typs haben wird. In TypeScript mit dem Schlüsselwort class definiert.
Objekt
Eine konkrete Instanz einer Klasse. Wenn eine Klasse der Bauplan ist, ist das Objekt das gebaute Haus. Jedes Objekt hat seine eigenen Attributwerte.
Attribut
Ein Datenwert, der zu einer Klasse gehört. Vergleichbar mit einer Variablen innerhalb der Klasse. Attribute beschreiben den Zustand eines Objekts.
Methode
Eine Funktion innerhalb einer Klasse. Methoden beschreiben das Verhalten eines Objekts. Sie können auf die eigenen Attribute mit this zugreifen.
Konstruktor
Eine spezielle Methode einer Klasse, die beim Erstellen eines neuen Objekts ausgeführt wird. In TypeScript mit constructor() definiert. Stellt sicher, dass das Objekt von Anfang an vollständig ist.
this
Das Schlüsselwort, mit dem eine Methode auf die eigenen Attribute und Methoden der Klasse zugreift. this.name bezieht sich auf das Attribut 'name' des aktuellen Objekts.
new
Das Schlüsselwort zum Erstellen eines neuen Objekts aus einer Klasse. let user = new User() ruft den Konstruktor der Klasse User auf und gibt ein neues Objekt zurück.
Vererbung
Eine Klasse kann eine andere erweitern (extends). Die abgeleitete Klasse erbt alle Attribute und Methoden der Elternklasse und kann eigene hinzufügen oder vorhandene überschreiben.
super
Schlüsselwort im Konstruktor einer abgeleiteten Klasse, das den Konstruktor der Elternklasse aufruft. Muss als erste Anweisung im Konstruktor stehen.
Kapselung
Ein OOP-Prinzip, bei dem die internen Daten eines Objekts vor direktem Zugriff von außen geschützt werden. Der Zugriff erfolgt stattdessen kontrolliert über Methoden.
Instanziierung
Der Prozess des Erstellens einer konkreten Instanz (eines Objekts) aus einem abstrakten Bauplan (einer Klasse) mittels des new-Operators.
Kernkonzepte
Das Problem ohne Klassen
Betrachten wir einen Onlineshop, in dem Nutzer sich registrieren können. Für jeden Nutzer brauchen wir Name, E-Mail und Passwort:
// Drei separate Variablen — funktioniert für einen Nutzer:
let name: string = "Max Muster";
let email: string = "max@muster.de";
let password: string = "geheim";Für mehrere Nutzer wird das mit parallelen Arrays schnell unübersichtlich:
// Parallele Arrays — fehleranfällig!
let name: string[] = ["Max Muster", "Mia Muster"];
let email: string[] = ["max@muster.de", "mia@muster.de"];
let password: string[] = ["geheim", "1234"];
// Index 0 = Max, Index 1 = Mia — aber wer garantiert das?Das Problem: Wird ein Eintrag vergessen (z. B. nur Name und E-Mail gelöscht, aber nicht das Passwort), gehören die Arrays nicht mehr zusammen.
Eine Klasse definieren
Eine Klasse fasst zusammengehörende Daten und Logik zusammen:
class User {
name: string;
email: string;
password: string;
}Klassenamen werden nach PascalCase geschrieben (jedes Wort groß, kein Leerzeichen):
User, ShoppingCart, ProductItem.Objekte erstellen
// Objektliteral (direkte Initialisierung):
let user: User = { name: "Max Muster", email: "max@muster.de", password: "geheim" };
// Mit new und Standardkonstruktor:
let user2: User = new User();
user2.name = "Mia Muster";
user2.email = "mia@muster.de";
user2.password = "1234";Auf Attribute wird mit dem Punkt-Operator zugegriffen:
user.name, user.email.Konstruktor
Der Standardkonstruktor erlaubt, dass man ein Objekt mit leeren Attributen (
undefined) erstellt. Das ist oft unerwünscht — ein Nutzer ohne E-Mail ergibt keinen Sinn. Ein eigener Konstruktor erzwingt vollständige Angaben:class User {
name: string;
email: string;
password: string;
constructor(email: string) {
this.email = email;
// name und password sind optional beim Erstellen
}
}
let user: User = new User("max@muster.de");
// user.email ist gesetzt, user.name und user.password noch undefinedDer Konstruktor wird automatisch beim
new-Aufruf ausgeführt. this.email bezieht sich auf das Attribut der Klasse, email (ohne this) ist der Parameter.Methoden
Klassen können neben Attributen auch Funktionen enthalten — Methoden genannt. Sie beschreiben das Verhalten eines Objekts.
class User {
name: string;
email: string;
password: string;
constructor(email: string) {
this.email = email;
}
changePassword(oldPassword: string, newPassword: string): void {
if (oldPassword === this.password) {
this.password = newPassword;
}
}
}
let user: User = new User("max@muster.de");
user.password = "altesPasswort";
user.changePassword("altesPasswort", "neuesPasswort");Info
Methoden in Klassen werden ohne das Schlüsselwort
function geschrieben. Der Zugriffsoperator . wird benutzt, um Methoden aufzurufen: user.changePassword(...). Innerhalb der Methode bezieht sich this auf das aufrufende Objekt.Vererbung: extends und super
Vererbung ermöglicht es, eine bestehende Klasse zu erweitern, ohne deren Code zu kopieren.
// Basisklasse (Elternklasse):
class Person {
firstname: string;
lastname: string;
constructor(firstname: string, lastname: string) {
this.firstname = firstname;
this.lastname = lastname;
}
greet(): string {
return `Hallo, mein Name ist ${this.firstname} ${this.lastname}`;
}
}
// Abgeleitete Klasse (Kindklasse):
class Student extends Person {
studentId: number;
studyProgram: string;
constructor(firstname: string, lastname: string, studentId: number, studyProgram: string) {
super(firstname, lastname); // Konstruktor der Elternklasse aufrufen
this.studentId = studentId;
this.studyProgram = studyProgram;
}
greet(): string { // Methode überschreiben
return `Hallo, mein Name ist ${this.firstname} ${this.lastname} und ich studiere ${this.studyProgram}`;
}
}
let stud: Student = new Student("Max", "Muster", 1234567, "Digital Media Systems");
console.log(stud.greet());
// "Hallo, mein Name ist Max Muster und ich studiere Digital Media Systems"| Konzept | Beschreibung |
|---|---|
extends Person | Student erbt alle Attribute und Methoden von Person |
super(...) | Ruft den Konstruktor der Elternklasse auf — muss als erste Anweisung stehen |
greet() überschrieben | Student hat eine eigene Implementierung, die die der Person-Klasse ersetzt |
Klausurrelevant
Das
Student-Objekt hat alle vier Attribute: firstname, lastname (von Person geerbt) + studentId, studyProgram (eigene). Polymorphismus: Eine Variable vom Typ Person kann auch ein Student-Objekt enthalten — aber nicht umgekehrt.Klassen in TypeScript — Verbindung zum DOM
Die bekannten DOM-Typen sind ebenfalls Klassen, die voneinander erben:
EventTarget←Node←Element←HTMLElement←HTMLInputElement
Das erklärt, warum
HTMLInputElement das Attribut value hat (speziell für Inputs) und innerHTML (geerbt von HTMLElement).// HTMLInputElement ist eine vordefinierte TypeScript-Klasse
const input: HTMLInputElement = document.querySelector('#meinInput');
console.log(input.value); // Eigenes Attribut von HTMLInputElement
console.log(input.id); // Geerbt von HTMLElementLernkarten
Übungsfragen
Welches Schlüsselwort erstellt ein neues Objekt aus einer Klasse?
Was ist der Unterschied zwischen einem Attribut und einer Methode?
Was muss als erste Anweisung im Konstruktor einer abgeleiteten Klasse stehen?
Wie schreibt man nach der PascalCase-Konvention eine Klasse für 'Einkaufswagen'?
Was ermöglicht Vererbung in der objektorientierten Programmierung?
Mit welchem Schlüsselwort kennzeichnet man eine Klasse, von der eine andere erbt?