Grundlagen von TypeScript: Typen und Interfaces

Einführung

In diesem Beitrag werden wir die Grundlagen Typen in TypeScript und die Verwendung von Interfaces kennenlernen. Diese Konzepte sind entscheidend, um den Code besser zu strukturieren und Fehler frühzeitig zu erkennen. TypeScript bringt starke Typisierung in das JavaScript-Ökosystem, was die Entwicklung und Wartung von großen Codebasen erheblich vereinfacht.

Grundlegende Typen

TypeScript bietet eine Vielzahl von grundlegenden Typen, die Sie zur Definition von Variablen, Funktionen und Objekten verwenden können. Diese Typen helfen dabei, die Integrität und Korrektheit des Codes sicherzustellen.

Einige der wichtigsten grundlegenden Typen sind:

string

: für Zeichenketten
number

: für Zahlen
boolean

: für Wahrheitswerte
array

: für Arrays
tuple

: für Tupel
enum

: für Enumerationen
any

: für beliebige Typen
void

: für Funktionen, die keinen Wert zurückgeben
null

und

undefined

: für Null- und undefinierte Werte
object

: für komplexe Objekte

Beispiele für grundlegende Typen:

Hier kommt ihr zu den CloudDNA Büchern | Rheinwerk Verlag

let message: string = "Hello, TypeScript";
let count: number = 42;
let isValid: boolean = true;
let numbers: number[] = [1, 2, 3, 4];
let tuple: [string, number] = ["Age", 30];
let anything: any = "This could be any type";

Funktionen mit Typen:

TypeScript ermöglicht es Ihnen, die Typen von Funktionsparametern und Rückgabewerten explizit zu definieren. Dies verbessert die Lesbarkeit und Verlässlichkeit des Codes.

function add(a: number, b: number): number {
    return a + b;
}

function logMessage(message: string): void {
    console.log(message);
}

let result: number = add(10, 20);
logMessage("This is a message");

Interfaces

Interfaces sind ein mächtiges Feature in TypeScript, das es ermöglicht, die Struktur von Objekten zu definieren. Sie helfen dabei, den Code besser zu organisieren und sicherzustellen, dass Objekte bestimmte Eigenschaften und Methoden haben.

Ein einfaches Interface

interface Person {
    firstName: string;
    lastName: string;
    age: number;
    greet(): string;
}

let user: Person = {
    firstName: "John",
    lastName: "Doe",
    age: 25,
    greet: function() {
        return `Hello, my name is ${this.firstName} ${this.lastName}`;
    }
};
console.log(user.greet());

In diesem Beispiel definiert das

Person

-Interface die Struktur eines Objekts mit den Eigenschaften

firstName

lastName

age

und der Methode

greet

. Das

user

-Objekt implementiert dieses Interface und stellt sicher, dass alle definierten Eigenschaften und Methoden vorhanden sind.

Interfaces für Funktionen:

Interfaces können auch verwendet werden, um die Signatur von Funktionen zu definieren.

interface Add {
    (a: number, b: number): number;
}

let addNumbers: Add = (a, b) => {
    return a + b;
};

console.log(addNumbers(5, 10)); // 15

Erweiterte Typen mit Interfaces

TypeScript-Interfaces bieten mehr als nur die Definition einfacher Objekte. Sie können auch erweitert und kombiniert werden, um komplexere Typen zu erstellen.

Vererbung von Interfaces:

Ein Interface kann ein anderes Interface erweitern und zusätzliche Eigenschaften oder Methoden hinzufügen.

interface Employee extends Person {
    employeeId: number;
    position: string;
}

let employee: Employee = {
    firstName: "Jane",
    lastName: "Doe",
    age: 30,
    greet: function() {
        return `Hello, my name is ${this.firstName} ${this.lastName} and I am an employee.`;
    },
    employeeId: 123,
    position: "Developer"
};

console.log(employee.greet());

In diesem Beispiel erweitert das

Employee

-Interface das

Person

-Interface und fügt die Eigenschaften

employeeId

und

position

hinzu.

Zusammenführen von Interfaces:

TypeScript ermöglicht es auch, mehrere Interfaces zu kombinieren, um neue Typen zu erstellen.

interface Contact {
    phoneNumber: string;
    email: string;
}

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

interface FullContact extends Contact, Address {}

let contact: FullContact = {
    phoneNumber: "123-456-7890",
    email: "example@example.com",
    street: "Main St",
    city: "Anytown",
    postalCode: "12345"
};

console.log(contact);

Hier wird das

FullContact

-Interface aus den

Contact

– und

Address

-Interfaces zusammengesetzt.

Typ Aliases

Typ Aliases erlauben es, benutzerdefinierte Namen für komplexe Typen zu erstellen. Dies kann den Code lesbarer und einfacher zu pflegen machen.

type Point = {
    x: number;
    y: number;
};

let point: Point = {
    x: 10,
    y: 20
};

type ID = string | number;

let userId: ID = "abc123";
let orderId: ID = 987654;

In diesem Beispiel definieren wir zwei Typ Aliases:

Point

für ein Objekt mit den Eigenschaften

und

für einen Typ, der entweder eine

string

oder eine

number

sein kann.

Fazit Grundlagen von Typescript

Typen und Interfaces sind grundlegende Bausteine von TypeScript, die dabei helfen, den Code klarer und sicherer zu gestalten. Sie ermöglichen eine bessere Organisation und Wartung von Code und reduzieren das Risiko von Fehlern. Im nächsten Beitrag werden wir uns mit fortgeschrittenen Typen in TypeScript beschäftigen und deren Verwendung in komplexeren Szenarien untersuchen.

Ausblick

Im nächsten Blogpost dieser Serie werden wir uns mit fortgeschrittenen Typen in TypeScript beschäftigen. Dazu gehören Union- und Intersection-Typen, Generics und Type Aliases. Diese Konzepte erweitern die Möglichkeiten von TypeScript und helfen dabei, noch flexibleren und wiederverwendbareren Code zu schreiben. Bleiben Sie dran und freuen Sie sich auf praktische Beispiele und tiefere Einblicke in die Welt von TypeScript.

Möchtet ihr über euch mit der Thema fortgeschrittenes Typen in TypeScript mehr beschäftigen. Schaut hier vorbei: TypeScript für Fortgeschrittene