Funktionen in TypeScript

Dieser Artikel erklärt Funktionen in TypeScript.

YouTube Video

Funktionen in TypeScript

Funktionen in TypeScript sind JavaScript-Funktionen mit zusätzlichen Typanmerkungen. In TypeScript können Sie robusteren Code schreiben, indem Sie die Typen von Eingaben (Parametern) und Ausgaben (Rückgabewerten) für Funktionen klar definieren. Im Folgenden stellen wir die grundlegenden Methoden zur Definition von Funktionen und einige Merkmale von Funktionen in TypeScript vor.

Grundlegende Funktionsdefinition

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• Die Funktion add nimmt zwei Argumente vom Typ number entgegen und gibt einen Wert vom Typ number zurück.
• Sie nimmt zwei Argumente, x und y, beide vom Typ number, deren Typen explizit angegeben sind.
• Der Rückgabetyp ist ebenfalls als : number angegeben.

Anonyme Funktionen (Funktionsausdrücke)

Anonyme Funktionen und Funktionsausdrücke können auch in TypeScript verwendet werden. Typen können auf die gleiche Weise annotiert werden.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Sie können einer Variablen eine anonyme Funktion zuweisen und diese später aufrufen.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Sie können einen benannten Funktionsausdruck verwenden, um rekursive Aufrufe zu ermöglichen.

Pfeilfunktionen (Arrow Functions)

Typanmerkungen können auch bei Pfeilfunktionen verwendet werden.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Dieser Code definiert eine Pfeilfunktion subtract mit Typannotationen, die zwei Zahlen als Argumente nimmt und deren Differenz zurückgibt.

Optionale und Standardparameter

Parameter können optional gemacht oder mit Standardwerten versehen werden.

Optionale Parameter

Indem Sie ? hinter den Parameter setzen, machen Sie ihn optional.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Dieser Code akzeptiert ein optionales Argument; wenn das Argument angegeben wird, begrüßt er mit dem Namen, andernfalls gibt er eine allgemeine Begrüßung zurück.

Standardparameter

Sie können auch Standardwerte für Parameter festlegen.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Diese Funktion verwendet "Gast" als Standardwert, wenn kein Argument übergeben wird, und begrüßt mit dem angegebenen oder dem Standardnamen.

Funktionstypedefinition

Es ist auch möglich, den Typ der Funktion selbst zu definieren. Zum Beispiel wird dies verwendet, wenn eine Funktion als Argument übergeben wird.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Dieser Code definiert einen Funktionstyp Operation, der zwei Zahlen entgegennimmt und eine Zahl zurückgibt; anschließend werden damit Additions- und Multiplikationsfunktionen erstellt und ausgeführt.

Wenn es keinen Rückgabewert gibt (Typ void)

Für Funktionen ohne Rückgabewert geben Sie den Typ void an.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Dieser Code definiert eine void-Funktion logMessage, die eine Zeichenkettennachricht entgegennimmt und sie auf der Konsole ausgibt, ohne einen Wert zurückzugeben.

Callback-Funktion

Eine Funktion als Argument an eine andere Funktion zu übergeben und sie später ausführen zu lassen, nennt man eine Callback-Funktion. Sie wird häufig bei asynchroner Verarbeitung und Ereignisbehandlung verwendet.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

In diesem Beispiel wird eine Funktion, die einen Wert auf die Konsole ausgibt, als Callback-Funktion übergeben.

Alternativ können Sie einen Callback-Typ mit type oder interface definieren.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Das Definieren eines Callback-Typs mit type oder interface verbessert die Wiederverwendbarkeit.

Funktionsüberladung

Funktionsüberladung ermöglicht es Ihnen, Funktionen mit demselben Namen, aber unterschiedlichen Parameterlisten zu definieren. In TypeScript können Sie mehrere Funktionen mit demselben Namen definieren und je nach Typ und Anzahl der Parameter unterschiedliche Operationen durchführen.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

In TypeScript wird Überladung wie folgt erreicht:.

• Überladungssignatur

  • Definiert, wie die Funktion verwendet werden kann (ihre Signatur). Durch mehrmaliges Festlegen dieser Signatur wird die Überladung möglich.

• Implementierungssignatur

  • Implementiert den eigentlichen Funktionskörper. Dieser Teil wird nur einmal definiert und verarbeitet alle in den Überladungssignaturen angegebenen Fälle.

Regeln für die Überladung

Die folgenden Regeln gelten für die Funktionsüberladung:.

• Reihenfolge der Überladungssignatur-Definitionen

  • Da die Auswertung von oben nach unten erfolgt, wird empfohlen, zuerst spezifische Typen und anschließend allgemeinere Typen zu definieren.

• Kompatibilität der Implementierungssignatur

  • Die Implementationssignatur muss mit den Argumenten und Rückgabewerten aller Überladungssignaturen kompatibel sein.

• Details in Überladungssignaturen angeben

  • Die Implementationssignatur neigt dazu, mehrdeutig zu sein, daher sollten Details in den Überladungssignaturen angegeben werden.
  • Wenn nur die Implementationssignatur definiert ist, wird die Typinferenz für die Funktion unzureichend sein.

Zusammenfassung

Funktionen in TypeScript haben die folgenden Eigenschaften.

• Typanmerkungen
  • Durch die Angabe von Typen für Argumente und Rückgabewerte können Sie sichereren Code schreiben.
• Anonyme Funktionen und Pfeilfunktionen
  • Sie können wie in JavaScript verwendet werden, und durch das Hinzufügen von Typanmerkungen wird die Typsicherheit erhöht.
• Optionale und Standardparameter
  • Sie können die Angabemöglichkeiten für Argumente nach Bedarf flexibler gestalten.
• Funktionstypdefinitionen
  • Definieren Sie den Typ der Funktion selbst, um eine Typüberprüfung durchzuführen.
• Funktionsüberladung
  • Sie können verschiedene Argumente mit demselben Funktionsnamen unterstützen.

Durch deren Nutzung können Sie klareren und robusteren Code in TypeScript schreiben.

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