Klassen in TypeScript

Dieser Artikel erklärt Klassen in TypeScript.

YouTube Video

Klassen in TypeScript

Klassen in TypeScript basieren auf den ES6-Klassen von JavaScript und bieten zusätzliche Funktionen wie Typanmerkungen und Zugriffsmodifikatoren. Dies ermöglicht es Ihnen, die Konzepte der objektorientierten Programmierung zu nutzen und gleichzeitig eine robustere und klarere Typensicherheit zu gewährleisten.

Im Folgenden werden die grundlegende Verwendung und Funktionen von Klassen in TypeScript erläutert.

Grundlegende Klassendefinition

 1class Person {
 2    name: string;  // Member variable
 3    age: number;   // Member variable
 4
 5    // Constructor
 6    constructor(name: string, age: number) {
 7        this.name = name;
 8        this.age = age;
 9    }
10
11    // Method
12    greet(): void {
13        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
14    }
15}
16
17const person = new Person("Alice", 25);
18person.greet();  // Hello, my name is Alice and I am 25 years old.

• name und age sind Eigenschaften (Mitgliedsvariablen) der Klasse.
• Der Konstruktor ist eine Methode, die aufgerufen wird, wenn eine Instanz einer Klasse erstellt wird. Sie nimmt Argumente entgegen und weist Werte den Eigenschaften zu.
• greet ist eine Methode der Klasse, die durch den Typ void angibt, dass sie keinen Rückgabewert hat.

Zugriffsmodifikatoren

In TypeScript können Sie Zugriffsmodifikatoren (public, private, protected) verwenden, um den Zugriff auf Eigenschaften und Methoden von Klassen zu steuern.

public

Standardmäßig sind alle Eigenschaften und Methoden public. Das bedeutet, dass sie von außerhalb der Klasse zugänglich sind.

 1class Animal {
 2    public species: string;
 3
 4    constructor(species: string) {
 5        this.species = species;
 6    }
 7
 8    public makeSound(): void {
 9        console.log(`${this.species} makes a sound.`);
10    }
11}
12
13const animal = new Animal("Dog");
14console.log(animal.species);  // Dog
15animal.makeSound();           // Dog makes a sound.

• Die Eigenschaft species und die Methode makeSound sind als public deklariert und können von außerhalb der Klasse zugegriffen werden.

private

Die Verwendung des Modifikators private verhindert den Zugriff auf die Eigenschaften oder Methoden von außerhalb der Klasse.

 1class Car {
 2    private brand: string;
 3
 4    constructor(brand: string) {
 5        this.brand = brand;
 6    }
 7
 8    public getBrand(): string {
 9        return this.brand;
10    }
11}
12
13const car = new Car("Toyota");
14// console.log(car.brand);  // Error: 'brand' is private and cannot be accessed.
15console.log(car.getBrand());  // Toyota

• Die Eigenschaft brand ist als private deklariert, daher kann von außerhalb der Klasse nicht darauf zugegriffen werden.
• Die Kapselung von Daten kann erreicht werden, indem Eigenschaften mit dem Modifier private verborgen werden.

protected

Der Modifikator protected schränkt den Zugriff von außerhalb der Klasse ein, erlaubt ihn jedoch in Unterklassen (abgeleiteten Klassen).

 1class Vehicle {
 2    protected model: string;
 3
 4    constructor(model: string) {
 5        this.model = model;
 6    }
 7}
 8
 9class Truck extends Vehicle {
10    public getModel(): string {
11        return this.model;
12    }
13}
14
15const truck = new Truck("Ford F-150");
16console.log(truck.getModel());  // Ford F-150
17
18// console.log(truck.model);
19// Error: Property 'model' is protected and only accessible within class 'Vehicle' and its subclasses.

• Die Eigenschaft model ist als protected deklariert, daher kann von außerhalb der Klasse nicht darauf zugegriffen werden, aber ihre Unterklassen haben Zugriff darauf.

Getter und Setter

In TypeScript können Sie Getter und Setter mit den Schlüsselwörtern get und set definieren, um Eigenschaftswerte abzurufen und festzulegen.

 1class Employee {
 2    private _salary: number;
 3
 4    constructor(salary: number) {
 5        this._salary = salary;
 6    }
 7
 8    // Getter
 9    get salary(): number {
10        return this._salary;
11    }
12
13    // Setter
14    set salary(newSalary: number) {
15        if (newSalary > 0) {
16            this._salary = newSalary;
17        } else {
18            console.log("Salary must be positive.");
19        }
20    }
21}
22
23const employee = new Employee(50000);
24console.log(employee.salary);  // 50000
25employee.salary = 60000;
26console.log(employee.salary);  // 60000
27employee.salary = -100;        // Salary must be positive.

• In diesem Beispiel werden für die Eigenschaft salary Getter und Setter verwendet, um den externen Zugriff sowie Aktualisierungen zu steuern. Der Setter führt eine Validierung durch, um negative Werte zu verhindern, und zeigt eine Warnmeldung an, falls ein ungültiger Wert bereitgestellt wird.

Vererbung

In TypeScript können Klassen vererbt werden. Mit dem Schlüsselwort extends können Sie Funktionalitäten von einer übergeordneten Klasse erben.

 1class Animal {
 2    constructor(public name: string) {}
 3
 4    public move(): void {
 5        console.log(`${this.name} is moving.`);
 6    }
 7}
 8
 9class Bird extends Animal {
10    public fly(): void {
11        console.log(`${this.name} is flying.`);
12    }
13}
14
15const bird = new Bird("Sparrow");
16bird.move();  // Sparrow is moving.
17bird.fly();   // Sparrow is flying.

• In diesem Beispiel erbt die Klasse Bird von der Klasse Animal, was es ihr ermöglicht, die Methode move von Animal zu verwenden. Außerdem definiert sie ihre eigene Methode fly und fügt so neue Funktionalitäten hinzu, während sie Eigenschaften von der Elternklasse erbt.

Abstrakte Klassen

Abstrakte Klassen (abstract) können nicht direkt instanziiert werden und dienen als Vorlagen, um konkrete Implementierungen in Unterklassen bereitzustellen.

 1abstract class Shape {
 2    abstract getArea(): number;
 3
 4    public describe(): void {
 5        console.log("This is a shape.");
 6    }
 7}
 8
 9class Circle extends Shape {
10    constructor(private radius: number) {
11        super();
12    }
13
14    public getArea(): number {
15        return Math.PI * this.radius * this.radius;
16    }
17}
18
19const circle = new Circle(5);
20console.log(circle.getArea());  // 78.53981633974483
21circle.describe();  // This is a shape.

• In diesem Beispiel ist Shape als abstrakte Klasse definiert und getArea ist eine abstrakte Methode, die von den Unterklassen implementiert werden muss. Die Klasse Circle erbt von dieser abstrakten Klasse und implementiert ihre eigene Methode getArea, um die Fläche eines Kreises zu berechnen. Darüber hinaus werden konkrete Methoden wie describe als gemeinsame Funktionalität geerbt und können unverändert verwendet werden.

Beziehung zu Schnittstellen

Klassen können Schnittstellen implementieren, um sicherzustellen, dass sie bestimmte Eigenschaften und Methoden haben.

 1interface Flyable {
 2    fly(): void;
 3}
 4
 5class Airplane implements Flyable {
 6    public fly(): void {
 7        console.log("The airplane is flying.");
 8    }
 9}
10
11const airplane: Flyable = new Airplane();
12airplane.fly();  // The airplane is flying.

• In diesem Beispiel definiert das Interface Flyable die Spezifikation für die Methode fly und die Klasse Airplane implementiert dieses Interface, indem sie eine konkrete Implementierung der Methode fly bereitstellt. Damit ist garantiert, dass jedes Objekt, das als Typ Flyable behandelt werden kann, über eine Methode fly verfügt.

Statische Mitglieder

Wenn Sie statische Mitglieder in einer Klasse definieren, werden diese Methoden und Eigenschaften der Klasse selbst zugeordnet. Statische Mitglieder können aufgerufen werden, ohne die Klasse zu instanziieren.

 1class MathUtils {
 2    static PI: number = 3.14;
 3
 4    static add(a: number, b: number): number {
 5        return a + b;
 6    }
 7}
 8
 9console.log(MathUtils.add(10, 20)); // 30
10console.log(MathUtils.PI); // 3.14

• Statische Methoden werden mit dem Schlüsselwort static definiert.
• In diesem Beispiel definiert die Klasse MathUtils eine statische Methode add und eine statische Eigenschaft PI.
• Statische Mitglieder gehören nicht zu Instanzen der Klasse, sondern können direkt von der Klasse selbst aufgerufen werden.

Zusammenfassung

TypeScript-Klassen fügen Funktionen wie Typsicherheit, Zugriffsmodifikatoren und abstrakte Klassen zur JavaScript-Klassenfunktionalität hinzu. Dies ermöglicht leistungsfähigere und sicherere objektorientierte Programmierung.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video