TypeScript: Funktionen mit Typen

Kurz: console.log(addiere(2, 3), mal(4, 5)); `output 5 20

Teil des Kurses TypeScript

Kapitel 3 von 15 im Kurs TypeScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Parameter und Rückgabe

function addiere(a: number, b: number): number {
  return a + b;
}
const mal = (a: number, b: number): number => a * b;
 
console.log(addiere(2, 3), mal(4, 5));

Ausgabe:

5 20

Der Rückgabetyp lässt sich oft weglassen (wird erkannt). Bei öffentlichen Funktionen ist er trotzdem eine gute Dokumentation.

Optionale Parameter und Standardwerte

function gruss(name: string, anrede?: string): string {
  return `${anrede ?? "Hallo"} ${name}`;
}
function potenz(basis: number, exponent: number = 2): number {
  return basis ** exponent;
}
console.log(gruss("Mia"), "|", gruss("Tom", "Moin"));
console.log(potenz(5), potenz(2, 10));

Ausgabe:

Hallo Mia | Moin Tom
25 1024

anrede?: string hat den Typ string | undefined. Optionale Parameter stehen nach den Pflichtparametern.

Rest-Parameter

function summe(...zahlen: number[]): number {
  return zahlen.reduce((s, z) => s + z, 0);
}
console.log(summe(1, 2, 3), summe());

Ausgabe:

6 0

void und never

• void: Funktion gibt nichts zurück
• never: Funktion kehrt nie normal zurück (wirft einen Fehler oder läuft endlos)

function logge(text: string): void {
  console.log("LOG:", text);
}
function fehler(nachricht: string): never {
  throw new Error(nachricht);
}
logge("fertig");
try { fehler("kaputt"); } catch (e) { console.log((e as Error).message); }

Ausgabe:

LOG: fertig
kaputt

Funktionstypen

Funktionen sind Werte und haben einen Typ:

type Rechner = (a: number, b: number) => number;
 
const plus: Rechner = (a, b) => a + b;        // Parametertypen werden abgeleitet
const minus: Rechner = (a, b) => a - b;
 
function anwenden(f: Rechner, x: number, y: number): number {
  return f(x, y);
}
console.log(anwenden(plus, 7, 3), anwenden(minus, 7, 3));
console.log([1, 2, 3].map((n) => n * 2));      // n wird als number erkannt

Ausgabe:

10 4
[ 2, 4, 6 ]

Überladungen

Eine Funktion kann mit unterschiedlichen Argumenten unterschiedliche Rückgabetypen haben:

function laenge(x: string): number;
function laenge(x: unknown[]): number;
function laenge(x: string | unknown[]): number {
  return x.length;
}
console.log(laenge("Hallo"), laenge([1, 2]));

Ausgabe:

5 2

Meist sind Union-Typen oder Generics die einfachere Lösung; Überladungen brauchst du eher bei Bibliotheken.

Objekte als Parameter

function zeige({ name, alter = 18 }: { name: string; alter?: number }): string {
  return `${name} (${alter})`;
}
console.log(zeige({ name: "Mia" }), zeige({ name: "Tom", alter: 30 }));

Ausgabe:

Mia (18) Tom (30)

this-Parameter

In Methoden kann this einen Typ bekommen. Als erster “Scheinparameter” wird er beim Kompilieren entfernt:

interface Zaehler { stand: number; erhoehe(this: Zaehler): void }
const z: Zaehler = { stand: 0, erhoehe() { this.stand++; } };
z.erhoehe();
console.log(z.stand);

Ausgabe:

1

Asynchrone Funktionen

async function lade(id: number): Promise<{ id: number; name: string }> {
  await new Promise((r) => setTimeout(r, 10));
  return { id, name: "Nutzer " + id };
}
lade(7).then((n) => console.log(n.name));

Ausgabe:

Nutzer 7

Der Rückgabetyp einer async-Funktion ist immer ein Promise<...>.

Fehlerhafte Aufrufe

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

Fehlermeldung:

error TS2554: Expected 2 arguments, but got 1.

Merke

• Parameter und (bei API) Rückgabewert mit Typ beschriften
• Optionale Parameter x?: T, Standardwerte x = 1, Rest ...x: T[]
• Funktionstypen: (a: number) => string
• void = nichts zurück, never = kehrt nie zurück
• async liefert Promise<T>

Übungsaufgabe

Schreibe mittelwert(...zahlen: number[]): number | undefined (leere Liste gibt undefined) und eine Funktion, die einen Rechner-Funktionstyp als Parameter nimmt.

Quiz zur Selbstkontrolle

Wie markierst du einen optionalen Parameter?

• name?: string (richtig)
• name: string?
• ?name: string
• name: optional string

Welchen Rückgabetyp hat eine async-Funktion, die number liefert?

• Promise<number> (richtig)
• number
• async<number>
• void

Was bedeutet never als Rückgabetyp?

• Die Funktion kehrt nie normal zurück (richtig)
• Die Funktion gibt nichts zurück
• Die Funktion ist optional
• Die Funktion ist veraltet

Weiter im Kurs

Zurück: Grundtypen und Typinferenz

Weiter: Objekte, Interfaces und Typ-Aliase

Alle Kapitel: TypeScript im Überblick