Direkt zum Hauptinhalt springen
eLearner.app
Modul 3 · Lektion 1 von 25/14 im Kurs~12 min
Lektionen des Moduls (1/2)

Typisierte Funktionen

Funktionen sind die grundlegenden Bausteine jeder JavaScript-Anwendung. In TypeScript können wir sowohl die Eingabeargumente als auch die Rückgabewerte präzise annotieren, was unsere Schnittstellen und Funktionsaufrufe extrem sicher und selbstdokumentierend macht.


Optionale Parameter und Standardparameter

In JavaScript ist jeder Parameter optional und nimmt, wenn er nicht übergeben wird, den Wert undefined an. In TypeScript ist standardmäßig jeder deklarierte Parameter obligatorisch.

Wir können jedoch optionale Parameter mit dem Fragezeichen (?) definieren oder Standardwerte direkt in der Signatur angeben.

1. Optionale Parameter

Optionale Parameter müssen nach den obligatorischen Parametern platziert werden:

TS
function greetUser(name: string, title?: string): string {
  if (title) {
    return `Buongiorno ${title} ${name}`;
  }
  return `Ciao ${name}`;
}

2. Standardparameter

Wenn kein Wert für einen Parameter mit Standardwert bereitgestellt wird, leitet TypeScript dessen Typ ab und weist den festgelegten Wert zu:

TS
function greetUserWithDefault(name: string, prefix: string = 'Ciao'): string {
  return `${prefix} ${name}`;
}

Rest-Parameter (...args)

Wenn wir eine variable Anzahl von Argumenten akzeptieren möchten, können wir den Rest-Operator verwenden. In TypeScript müssen diese Parameter als Array typisiert werden:

TS
function sumAll(message: string, ...numbers: number[]): string {
  const total = numbers.reduce((sum, n) => sum + n, 0);
  return `${message} ${total}`;
}

Funktionstypen (Function Types)

Wir können den Typ einer Funktion unabhängig definieren, um ihn dann bei der Deklaration von Variablen oder Callbacks wiederzuverwenden:

TS
// Definizione del tipo tramite alias
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

Dieser Ansatz ist von grundlegender Bedeutung, wenn Funktionen als Argumente an andere Funktionen übergeben werden (Callbacks).


Probier es aus

Esercizio 1: Optionale Parameter

Übung#ts.m3.l1.e1
Versuche: 0Wird geladen…

Erstelle eine Funktion namens formatName, die einen Parameter firstName (String) und einen optionalen Parameter lastName (String) akzeptiert. Wenn lastName angegeben wird, gib 'firstName lastName' zurück, andernfalls gib nur 'firstName' zurück.

Editor wird geladen…
Hinweis anzeigen

Denke daran, dass der optionale Parameter mit lastName?: string nach dem obligatorischen deklariert wird.

Lösung nach 3 Versuchen verfügbar

Esercizio 2: Standardparameter

Übung#ts.m3.l1.e2
Versuche: 0Wird geladen…

Erstelle eine Funktion namens power, die eine base (Zahl) und einen exponent (Zahl mit Standardwert gleich 2) akzeptiert. Die Funktion muss den Wert der Basis hoch dem Exponenten berechnen und zurückgeben (verwende Math.pow).

Editor wird geladen…
Hinweis anzeigen

Verwende base: number und exponent: number = 2 in der Signatur der Funktion.

Lösung nach 3 Versuchen verfügbar

Esercizio 3: Funktionstyp-Signatur

Übung#ts.m3.l1.e3
Versuche: 0Wird geladen…

Definiere ein Typ-Alias namens BinaryOp, das eine Funktion beschreibt, die zwei Parameter vom Typ Zahl akzeptiert und eine Zahl zurückgibt. Deklariere dann eine Konstante namens sum vom Typ BinaryOp, die die Addition implementiert.

Editor wird geladen…
Hinweis anzeigen

Die Syntax für den Funktionstyp lautet (a: number, b: number) => number.

Lösung nach 3 Versuchen verfügbar

Esercizio 4: Callback-Funktion

Übung#ts.m3.l1.e4
Versuche: 0Wird geladen…

Erstelle eine Funktion namens processItems, die zwei Parameter akzeptiert: items (ein Array von Strings) und callback (eine Funktion, die einen einzelnen String akzeptiert und nichts zurückgibt, d. h. void). Die Funktion muss eine for...of-Schleife über jedes Element von items ausführen und es an den Callback übergeben.

Editor wird geladen…
Hinweis anzeigen

Deklariere die Signatur als processItems(items: string[], callback: (item: string) => void): void und verwende eine Schleife, um den Callback aufzurufen.

Lösung nach 3 Versuchen verfügbar