Klassen in TypeScript

In dit artikel worden klassen in TypeScript uitgelegd.

YouTube Video

Klassen in TypeScript

Klassen in TypeScript zijn gebaseerd op de ES6-klassen van JavaScript en bieden extra functies zoals typeannotaties en toegangsmodificatoren. Dit stelt je in staat de concepten van objectgeoriënteerd programmeren te benutten, terwijl je zorgt voor een robuustere en duidelijkere typestrictheid.

Hieronder volgen uitleggen over het basisgebruik en de functies van klassen in TypeScript.

Basisdefinitie van een klasse

 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 en age zijn eigenschappen (lidvariabelen) van de klasse.
• De constructor is een methode die wordt aangeroepen bij het aanmaken van een instantie van een klasse, die argumenten accepteert en waarden toekent aan eigenschappen.
• greet is een methode van de klasse, die aangeeft dat het geen retourwaarde heeft omdat het van het type void is.

Toegangsmodificatoren

In TypeScript kun je toegangsmodificatoren (public, private, protected) gebruiken om de toegang tot eigenschapen en methoden van een klasse te beheersen.

public

Standaard zijn alle eigenschappen en methoden public. Dit betekent dat ze van buiten de klasse toegankelijk zijn.

 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.

• De eigenschap species en de methode makeSound zijn als public gedeclareerd en kunnen van buiten de klasse worden benaderd.

private

Het gebruik van de private-modificator voorkomt toegang tot de eigenschappen of methoden vanaf buiten de 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

• De eigenschap brand is als private gedeclareerd en kan daarom niet van buiten de klasse worden benaderd.
• Het kapselen van data kan worden bereikt door eigenschappen te verbergen met de private modifier.

protected

De protected-modificator beperkt de toegang van buiten de klasse, maar staat toegang toe in klassen die van de klasse afleiden (subklassen).

 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.

• De eigenschap model is als protected gedeclareerd; het kan dus niet van buiten de klasse worden benaderd, maar wel vanuit subklassen.

Getters en Setters

In TypeScript kun je getters en setters definiëren met behulp van de trefwoorden get en set om eigenschapswaarden op te halen en in te stellen.

 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 dit voorbeeld worden een getter en een setter gebruikt voor de eigenschap salary om externe toegang en bijwerking te controleren. De setter voert een validatie uit om negatieve waarden te voorkomen, en geeft een waarschuwing als een ongeldige waarde wordt opgegeven.

Overerving

In TypeScript kunnen klassen worden overgeërfd. Met behulp van het trefwoord extends kun je functionaliteit overerven van een bovenliggende klasse.

 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 dit voorbeeld erft de klasse Bird van de klasse Animal, waardoor het de methode move van Animal kan gebruiken. Bovendien definieert het zijn eigen methode fly, waardoor nieuwe functionaliteit wordt toegevoegd terwijl kenmerken van de bovenliggende klasse worden geërfd.

Abstracte Klassen

Abstracte klassen (abstract) kunnen niet direct worden geïnstantieerd en worden gebruikt als sjablonen om concrete implementaties in subklassen te bieden.

 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 dit voorbeeld is Shape gedefinieerd als een abstracte klasse en is getArea een abstracte methode die door subklassen moet worden geïmplementeerd. De klasse Circle erft deze abstracte klasse en implementeert zijn eigen methode getArea om de oppervlakte van een cirkel te berekenen. Daarnaast worden concrete methoden zoals describe als gemeenschappelijke functionaliteit geërfd en kunnen ze direct worden gebruikt.

Relatie met Interfaces

Klassen kunnen interfaces implementeren, waarmee wordt gegarandeerd dat ze specifieke eigenschappen en methoden hebben.

 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 dit voorbeeld definieert de interface Flyable de specificatie voor de methode fly, en de klasse Airplane implementeert deze interface door een concrete implementatie van de methode fly te bieden. Hierdoor is elk object dat als een Flyable type kan worden behandeld gegarandeerd voorzien van een fly methode.

Statische leden

Wanneer je statische leden in een klasse definieert, zijn die methoden en eigenschappen aan de klasse zelf gekoppeld. Statische leden kunnen worden aangeroepen zonder een instantie van de klasse te maken.

 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

• Je definieert statische methoden met behulp van het sleutelwoord static.
• In dit voorbeeld definieert de klasse MathUtils een statische methode add en een statische eigenschap PI.
• Statische leden behoren niet tot klasse-instanties, maar kunnen direct vanuit de klasse zelf worden aangeroepen.

Samenvatting

TypeScript-klassen voegen functies zoals typestrictheid, toegangsmodificatoren en abstracte klassen toe aan de functionaliteit van JavaScript-klassen. Dit maakt krachtiger en veiliger objectgeoriënteerd programmeren mogelijk.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video