Optionale Parameter

Manchmal darf ein Argument wirklich weggelassen werden. Der Wirt begrüßt jeden Gast, aber nur manche Gäste haben einen Titel, wie Ritter oder Dame. TypeScript würde einen Aufruf ohne den Titel melden (Expected 2 arguments, but got 1.), also musst du sagen, dass der Parameter optional ist: Setze ein Fragezeichen hinter seinen Namen:

function begruessen(name: string, titel?: string): string {
    if (titel === undefined) {
        return `Willkommen, ${name}!`;
    }
    return `Willkommen, ${titel} ${name}!`;
}

console.log(begruessen("Kira"));
console.log(begruessen("Bruno", "Ritter"));

Das gibt aus:

Willkommen, Kira!
Willkommen, Ritter Bruno!

Jetzt nimmt begruessen ein oder zwei Argumente. Bei drei meldet TypeScript Expected 1-2 arguments, but got 3.

Wird das Argument weggelassen, ist der Parameter undefined, genau wie in JavaScript. Innerhalb der Funktion ist titel also nicht einfach ein string. Sein Typ ist string | undefined: „ein String oder undefined“. (Das | bedeutet „oder“. Solche Typen sind das Thema der Lektion „Unions und Eingrenzen“.) TypeScript lässt dich titel erst als String verwenden, wenn du geprüft hast, dass er nicht undefined ist:

function begruessen(name: string, titel?: string): string {
    return `Willkommen, ${titel.toUpperCase()} ${name}!`;
}

console.log(begruessen("Kira"));

main.ts(2,27): error TS18048: 'titel' is possibly 'undefined'.

'titel' is possibly 'undefined': In JavaScript würde begruessen("Kira") hier mit TypeError: Cannot read properties of undefined (reading 'toUpperCase') abstürzen. TypeScript meldet es, bevor das Programm läuft.

Im ersten Beispiel behandelt das if den Gast ohne Titel und gibt zurück. TypeScript folgt den Bedingungen in deinem Code, deshalb weiß es, dass titel unterhalb dieses if nur ein string sein kann, und du darfst es als solchen verwenden.

Sei aber vorsichtig mit Template-Strings. TypeScript lässt undefined darin zu, und es wird zum Text undefined. Ohne die Prüfung würde begruessen("Kira") den Text Willkommen, undefined Kira! zurückgeben, ohne Fehler. Dort liegt die Prüfung bei dir.

Optionale Parameter stehen nach den erforderlichen. Argumente gehen der Reihe nach in die Parameter, sonst würde begruessen("Kira") "Kira" in den Titel stecken:

function begruessen(titel?: string, name: string): string {
    return `Willkommen, ${name}!`;
}

main.ts(1,38): error TS1016: A required parameter cannot follow an optional parameter.

Typische Fehler:

• Den Parameter ohne Prüfung verwenden: 'titel' is possibly 'undefined'.
• Das Fragezeichen hinter dem Typ, titel: string?, statt hinter dem Namen. TypeScript meldet '?' at the end of a type is not valid TypeScript syntax. Did you mean to write 'string | undefined'? Das Fragezeichen steht direkt hinter dem Namen des Parameters: titel?: string.