16 Typisierung

TypeScript ist eine Open-Source-Programmiersprache, die von Microsoft entwickelt wurde. Es ist eine streng typisierte Übermenge von JavaScript, was bedeutet, dass jedes gültige JavaScript-Programm auch ein gültiges TypeScript-Programm ist. Durch die Einführung statischer Typen und weiterer funktionaler Programmierkonzepte bietet TypeScript eine Reihe von Vorteilen, darunter verbesserte Codelesbarkeit und -vorhersagbarkeit, Fehlervermeidung und verbesserte Tooling-Unterstützung.

Hier sind einige der Grundlagen von TypeScript, die Sie verstehen sollten:

16.1 Statische Typisierung

Im Gegensatz zu JavaScript, das dynamisch typisiert ist, ist TypeScript statisch typisiert. Das bedeutet, dass Sie den Typ einer Variablen angeben können, wenn Sie sie deklarieren:

let message: string;
message = 'Hello, World!';

16.2 Typinferenz

Auch wenn TypeScript eine statische Typisierung ermöglicht, müssen Sie nicht für jede Variable den Typ angeben. Wenn Sie einer Variablen einen Wert zuweisen, wenn Sie sie deklarieren, wird TypeScript den Typ dieser Variable automatisch ableiten:

// TypeScript leitet ab, dass message eine Zeichenkette ist
let message = 'Hello, World!';

16.3 Union Type

Union-Typen sind eine Möglichkeit, in TypeScript eine Variable zu definieren, die mehrere mögliche Typen haben kann. Sie werden durch die Verwendung des vertikalen Balkens (|) zwischen den Typen definiert. Zum Beispiel könnte eine Variable vom Typ string | number entweder eine Zeichenkette oder eine Zahl sein.

let identifier: string | number;

identifier = 'myString';  // Das ist in Ordnung
identifier = 100;  // Das ist auch in Ordnung

Diese Funktion ist besonders nützlich, wenn Sie mit Funktionen oder APIs arbeiten, die mehrere verschiedene Typen von Argumenten oder Rückgabewerten akzeptieren können.

function formatInput(input: string | number) {
  if (typeof input === 'string') {
    return input.trim();
  } else {
    return input.toFixed(2);
  }
}

// Gibt 'TypeScript' aus
console.log(formatInput('   TypeScript   '));  
// Gibt '42.00' aus
console.log(formatInput(42));

In dem obigen Beispiel akzeptiert die formatInput-Funktion entweder eine Zeichenkette oder eine Zahl als Eingabe. Im Inneren der Funktion verwenden wir die typeof-Bedingung, um zu überprüfen, welchen Typ das Eingabe-Argument hat, und um es entsprechend zu formatieren. Dieses Muster wird häufig verwendet, wenn mit Union-Typen gearbeitet wird und wird als Typwächter bezeichnet.

Obwohl Union-Typen sehr flexibel sind, sollten Sie darauf achten, dass Sie sie nicht zu komplex machen, da dies den Code schwer zu verstehen und zu warten machen kann.

16.4 Type Aliase

In TypeScript können Sie Type Aliase verwenden, um benutzerdefinierte Typen zu erstellen, die auf bestehenden Typen basieren. Dies kann den Code leichter lesbar und wartbar machen, insbesondere wenn Sie komplexe Typen oder Union-Typen verwenden.

Ein Type Alias wird mit dem Schlüsselwort type definiert. Hier ist ein einfaches Beispiel:

type StringOrNumber = string | number;

let id: StringOrNumber;

id = '1234';  // OK
id = 1234;    // OK

In diesem Beispiel haben wir einen Type Alias namens StringOrNumber erstellt, der ein Union-Typ von string und number ist. Dann haben wir eine Variable id vom Typ StringOrNumber deklariert, die entweder eine Zeichenkette oder eine Zahl enthalten kann.

Type Aliase können auch für komplexere Typen verwendet werden, wie z.B. Objekttypen oder Funktionstypen:

type User = {
  name: string;
  age: number;
};

let bob: User = {
  name: 'Bob',
  age: 30
};

type StringArray = string[];

let fruits: StringArray = ['apple', 'banana', 'cherry'];

type Callback = (data: string) => void;

let logData: Callback = data => console.log(data);

Eine wichtige Sache, die man über Type Aliase wissen sollte, ist, dass sie nur neue Namen für bestehende Typen erstellen, aber nicht neue Typen selbst. Das bedeutet, dass TypeScript die Typen hinter den Aliasen prüft, nicht die Aliasnamen selbst. So betrachtet TypeScript beispielsweise StringOrNumber und string | number als den gleichen Typ.

Ein weiteres Feature von TypeScript ist die Möglichkeit, mit dem Schlüsselwort type konditionale Typen zu erstellen, die auf Bedingungen basieren. Aber das ist ein fortgeschritteneres Thema und kann für Anfänger verwirrend sein. Für den Anfang ist es wichtig zu verstehen, wie man einfache Type Aliase verwendet.

16.5 Aufgaben

Sehr gerne, hier sind die Übungsaufgaben zu den Themen “Statische Typisierung”, “Typinferenz”, “UnionType” und “Type Aliase”:

  1. Aufgabe 1: Deklarieren Sie eine Variable vom Typ “number” und weisen Sie ihr einen numerischen Wert zu. Versuchen Sie dann, einen String-Wert dieser Variable zuzuweisen und beobachten Sie das Ergebnis.

  2. Aufgabe 2: Deklarieren Sie eine Variable und weisen Sie ihr den Wert “Hallo Welt” zu. Lassen Sie TypeScript den Typ der Variable automatisch ableiten (Typinferenz) und prüfen Sie dann den Typ der Variable.

  3. Aufgabe 3: Definieren Sie einen Union-Typ, der entweder eine Zahl oder einen String sein kann. Deklarieren Sie eine Variable mit diesem Union-Typ und weisen Sie ihr sowohl Zahlen- als auch String-Werte zu.

  4. Aufgabe 4: Definieren Sie einen Type Alias namens “StringOrNumber”, der ein Union-Typ ist und entweder eine Zeichenkette oder eine Zahl sein kann. Verwenden Sie diesen Type Alias, um eine Variable zu deklarieren und ihr verschiedene Werte zuzuweisen.

  5. Aufgabe 5: Ändern Sie die Definition des “StringOrNumber”-Type Aliases, um weitere Typen wie “boolean” und “null” hinzuzufügen. Testen Sie dann diesen erweiterten Type Alias mit verschiedenen Wertzuweisungen.

  6. Aufgabe 6: Verwenden Sie Typinferenz und Union-Typen zusammen. Deklarieren Sie eine Variable, der Sie zunächst eine Zahl zuweisen und die Sie später durch einen String ersetzen.

  7. Aufgabe 7: Schreiben Sie eine Funktion, die einen Parameter vom Typ “StringOrNumber” (der Type Alias, den Sie zuvor erstellt haben) akzeptiert und das Quadrat des Parameters zurückgibt, wenn der Parameter eine Zahl ist, oder die Länge des Parameters, wenn der Parameter ein String ist.

  8. Aufgabe 8: Schreiben Sie eine Funktion, die einen Union-Typ als Parameter akzeptiert und abhängig vom tatsächlichen Typ des Parameters unterschiedliche Operationen ausführt.

Lösung 1:

let num: number = 5;
// num = "Hallo"; // Fehler: Der Typ '"Hallo"' kann dem Typ 'number' nicht zugewiesen werden.

Lösung 2:

let begruessung = "Hallo Welt";
console.log(typeof begruessung); // Ausgabe: "string"

Lösung 3:

let wert: number | string;
wert = 5; // Kein Fehler
wert = "Hallo"; // Kein Fehler

Lösung 4:

type StringOrNumber = number | string;
let meineVariable: StringOrNumber;
meineVariable = 5; // Kein Fehler
meineVariable = "Hallo"; // Kein Fehler

Lösung 5:

type StringOrNumber = number | string | boolean | null;
let meineVariable: StringOrNumber;
meineVariable = true; // Kein Fehler
meineVariable = null; // Kein Fehler

Lösung 6:

let meineVariable = 5; // TypeScript leitet den Typ "number" ab.
meineVariable = "Hallo"; // Fehler: Der Typ '"Hallo"' kann dem Typ 'number' nicht zugewiesen werden.

Lösung 7:

type StringOrNumber = number | string;

function verarbeiteWert(wert: StringOrNumber) {
    if (typeof wert === "number") {
        return wert * wert;
    } else if (typeof wert === "string") {
        return wert.length;
    }
}

Lösung 8:

type MeinUnionTyp = number | string;

function verarbeiteEinheit(wert: MeinUnionTyp) {
    if (typeof wert === "number") {
        return wert * 2;
    } else if (typeof wert === "string") {
        return wert.toUpperCase();
    }
}