TypeScript - Function Types

Hallo, angehende Programmierer! Heute tauchen wir ein in die faszinierende Welt der TypeScript-Funktionstypen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Sie durch jeden Begriff schrittweise führen, genau wie ich es über die Jahre mit unzähligen Schülern gemacht habe. Lassen Sie uns gemeinsam diese aufregende Reise antreten!

Typisierung einer Funktion

In TypeScript sind Funktionenfirst-class Bürger, was bedeutet, dass wir sie wie jeden anderen Wert behandeln können. Aber das Besondere an TypeScript ist seine Fähigkeit, diese Funktionen zu typisieren. Stellen Sie sich vor, Sie sind ein Koch (die Funktion) mit einem besonderen Rezept (der Funktionstyp). Das Rezept sagt Ihnen, welche Zutaten Sie benötigen (Parameter) und welches Gericht Sie zaubern werden (Rückgabewert).

Schauen wir uns ein einfaches Beispiel an:

function greet(name: string): string {
return `Hello, ${name}!`;
}

In diesem Beispiel ist greet unsere Funktion. Sie nimmt einen name vom Typ string als Eingabe und gibt einen string zurück. Das : string nach den Klammern gibt den Rückgabewerttyp an.

Nun probieren wir es aus:

const greeting = greet("Alice");
console.log(greeting); // Ausgabe: Hello, Alice!

TypeScript stellt sicher, dass wir die Funktion korrekt verwenden. Wenn wir versuchen, eine Zahl anstelle einer Zeichenkette zu übergeben:

greet(123); // Fehler: Argument des Typs 'number' ist nicht zuweisbar an Parameter des Typs 'string'.

TypeScript wird diesen Fehler erkennen, noch bevor wir den Code ausführen. Es ist wie ein hilfreicher Assistent in der Küche, der sicherstellt, dass Sie versehentlich kein Zucker anstelle von Salz verwenden!

TypeScript-Funktionstypausdruck

Nun lernens wir über Funktionstypausdrücke. Diese sind wie.Blueprints für unsere Funktionen. Sie beschreiben, wie eine Funktion aussehen sollte, ohne sie tatsächlich zu implementieren.

Hier ist die allgemeine Syntax:

(parameter1: type1, parameter2: type2, ...) => returnType

Zum Beispiel:

let mathOperation: (x: number, y: number) => number;

Dies declariert mathOperation als Variable, die jede Funktion aufnehmen kann, die zwei Zahlen nimmt und eine Zahl zurückgibt. Es ist, als ob man sagt: "Ich brauche einen Koch, der zwei Zutaten nehmen und ein Gericht zaubern kann."

Wir können dann eine Funktion dieser Variable zuweisen:

mathOperation = function(x, y) {
return x + y;
}

console.log(mathOperation(5, 3)); // Ausgabe: 8

Deklaration einer Funktionstypvariablen

Wir können auch Typalias zu verwenden, um unsere Funktionstypen einen Namen zu geben. Dies ist nützlich, wenn wir denselben Funktionstyp an mehreren Stellen wiederverwenden möchten.

type GreetFunction = (name: string) => string;

let greet: GreetFunction;

greet = function(name) {
return `Hello, ${name}!`;
}

console.log(greet("Bob")); // Ausgabe: Hello, Bob!

In diesem Beispiel ist GreetFunction unser Typalias. Es ist, als ob man seiner Rezept einen Namen gibt, damit man später leicht darauf verweisen kann.

Festlegung von Funktion参数 als Funktionen

Manchmal möchten wir Funktionen als Parameter an andere Funktionen übergeben. Dies ist ein mächtiges Konzept im Programmieren, das als "Higher-Order Functions" bekannt ist. Es ist wie ein Meisterkoch, der andere Köche anleiten kann.

Schauen wir uns ein Beispiel an:

function applyOperation(x: number, y: number, operation: (a: number, b: number) => number): number {
return operation(x, y);
}

let result = applyOperation(5, 3, (a, b) => a + b);
console.log(result); // Ausgabe: 8

result = applyOperation(5, 3, (a, b) => a * b);
console.log(result); // Ausgabe: 15

Hier ist applyOperation unsere Higher-Order-Funktion. Sie nimmt zwei Zahlen und eine Operationfunktion als Parameter. Wir können verschiedene Operationfunktionen übergeben, um verschiedene Ergebnisse zu erzielen.

Verwenden von Typalias für Funktionstypen

Typalias können unseren Code lesbarer machen, wenn wir mit komplexen Funktionstypen arbeiten. Schauen wir uns ein komplexeres Beispiel an:

type MathOperation = (x: number, y: number) => number;
type MathOperationWithDescription = (description: string, operation: MathOperation) => string;

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

const describeMathOperation: MathOperationWithDescription = (description, operation) => {
return `${description}: ${operation(10, 5)}`;
}

console.log(describeMathOperation("Addition", add)); // Ausgabe: Addition: 15
console.log(describeMathOperation("Subtraction", subtract)); // Ausgabe: Subtraction: 5

In diesem Beispiel haben wir zwei Typalias erstellt: MathOperation und MathOperationWithDescription. Dies macht unseren Code viel lesbarer und wartbarer.

Hier ist eine Tabelle, die die Funktionstypen zusammenfasst, die wir besprochen haben:

Funktionstyp	Beschreibung	Beispiel
Grundlegender Funktionstyp	Gibt Parameter- und Rückgabetypen an	(name: string) => string
Funktionstypvariable	Variable, die eine Funktion eines bestimmten Typs aufnehmen kann	let greet: (name: string) => string;
Funktionstypalias	Benannter Funktionstyp, der wiederverwendet werden kann	type GreetFunction = (name: string) => string;
Higher-Order Funktion	Funktion, die eine Funktion als Parameter nimmt	(x: number, y: number, operation: (a: number, b: number) => number) => number

Denken Sie daran, TypeScript-Funktionstypen dienen dazu, sicherzustellen, dass wir unsere Funktionen korrekt verwenden. Sie sind wie Sicherheitsleisten auf einer Straße, die uns helfen, auf Kurs zu bleiben und Fehler zu vermeiden. Mit der Übung werden Sie feststellen, dass sie Ihren Code robuster und leichter verständlich machen.

Weiter codieren, weiter lernen und nicht vergessen, Spaß dabei zu haben!

Credits: Image by storyset