TypeScript optionale Parameter, Standardwerte und Rest

Setze ? hinter einen Parameternamen, um ihn optional zu machen. Aufrufer dürfen ihn weglassen, und innerhalb der Funktion enthält sein Typ undefined.

function greet(name: string, title?: string): string {
  // title is string | undefined here
  return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
}

console.log(greet("Lovelace"));          // Hello, Lovelace
console.log(greet("Lovelace", "Lady"));  // Hello, Lady Lovelace

TypeScript prüft die Anzahl der Argumente, ohne das ? wäre der erste Aufruf also ein Compilerfehler: Expected 2 arguments, but got 1. (TS2554).

Optionale Parameter können undefined sein

Weil ein Aufrufer ihn weglassen kann, ist der Typ eines optionalen Parameters innerhalb der Funktion T | undefined. Unter strictNullChecks musst du den Fall undefined behandeln, bevor du ihn als T verwendest.

function formatPrice(amount: number, currency?: string): string {
  // currency.toUpperCase() here would fail: 'currency' is possibly 'undefined'. (TS18048)
  const code = currency?.toUpperCase() ?? "USD";
  return `${amount.toFixed(2)} ${code}`;
}

console.log(formatPrice(9.5));        // 9.50 USD
console.log(formatPrice(12, "eur"));  // 12.00 EUR

Optional Chaining (?.) und Nullish Coalescing (??) sind hier die üblichen Werkzeuge. Ist der Ersatz ein fester Wert, ist ein Standardwert für den Parameter kürzer.

Standardwerte für Parameter

Ein Standardwert macht den Parameter für Aufrufer optional und gibt ihm innerhalb der Funktion einen Typ ohne undefined. Der Typ wird aus dem Standardwert abgeleitet, die Annotation ist also oft überflüssig.

function repeat(text: string, times = 2, separator: string = " "): string {
  // times: number, separator: string (never undefined here)
  return Array.from({ length: times }, () => text).join(separator);
}

console.log(repeat("ha"));              // ha ha
console.log(repeat("ha", 3, "-"));      // ha-ha-ha
console.log(repeat("ha", undefined, "")); // haha

Der Aufrufer sieht die Signatur repeat(text: string, times?: number, separator?: string). Standardwerte folgen der Regel von JavaScript: Sie greifen, wenn das Argument undefined ist, egal ob weggelassen oder ausdrücklich übergeben, und nicht bei null. Ein Standardausdruck kann frühere Parameter verwenden: function range(start: number, end = start + 10).

Regeln zur Reihenfolge der Parameter

Ein Parameter mit Standardwert vor einem Pflichtparameter ist erlaubt, aber umständlich. Sein Typ für Aufrufer wird zu number | undefined, und niemand schreibt gern undefined als Platzhalter. Brauchst du einen flexiblen ersten Parameter, nimm stattdessen ein Options-Objekt oder Funktionsüberladung.

Weggelassen vs undefined

x?: number und x: number | undefined sehen ähnlich aus und haben innerhalb der Funktion denselben Typ. Für den Aufrufer unterscheiden sie sich: Das erste darf weggelassen werden, das zweite muss übergeben werden.

function a(x?: number) { return x; }
function b(x: number | undefined) { return x; }

console.log(a());          // undefined
console.log(b(undefined)); // undefined
// @ts-expect-error: Expected 1 arguments, but got 0.
b();

Nimm | undefined für ein Pflichtargument, das keinen Wert haben darf, damit jeder Aufrufer darüber nachdenken muss. Nimm ?, wenn das Weglassen ein normaler Aufruf ist. (Die Meldung sagt wirklich „1 arguments“: So formuliert es TypeScript.)

Rest-Parameter

Ein Rest-Parameter, ...name: T[], sammelt beliebig viele Argumente in einem Array. Er muss der letzte Parameter sein.

function sum(...values: number[]): number {
  return values.reduce((total, v) => total + v, 0);
}

function tag(name: string, ...classes: string[]): string {
  return `<${name} class="${classes.join(" ")}">`;
}

console.log(sum());             // 0
console.log(sum(1, 2, 3));      // 6
const scores = [4, 8, 15];
console.log(sum(...scores));    // 27
console.log(tag("div", "card", "wide")); // <div class="card wide">

Ein Array in feste Parameter zu spreaden ist strenger. Ein Rest-Parameter akzeptiert den Spread jedes number[], aber eine als (a: number, b: number) deklarierte Funktion akzeptiert nur den Spread eines Tupels, weil TypeScript die Länge kennen muss:

function point(x: number, y: number) { return { x, y }; }

const list = [3, 4];            // number[]
point(...list);
// error TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.

const pair = [3, 4] as const;   // readonly [3, 4]
point(...pair);                 // fine

Ein Rest-Parameter kann auch einen Tupel-Typ haben, der jede Position typisiert: ...args: [name: string, age?: number].

Options-Objekte

Hat eine Funktion mehr als zwei oder drei optionale Parameter, verlieren Aufrufer den Überblick über die Positionen. Ein Options-Objekt mit Standardwerten liefert benannte Argumente ohne feste Reihenfolge.

interface FetchOptions {
  retries?: number;
  timeoutMs?: number;
  verbose?: boolean;
}

function fetchData(url: string, { retries = 3, timeoutMs = 5000, verbose = false }: FetchOptions = {}): string {
  return `${url} retries=${retries} timeout=${timeoutMs} verbose=${verbose}`;
}

console.log(fetchData("/a"));
// /a retries=3 timeout=5000 verbose=false
console.log(fetchData("/b", { verbose: true }));
// /b retries=3 timeout=5000 verbose=true

Das = {} am Ende macht das ganze Objekt optional. Ohne es ist fetchData("/a") ein Compilerfehler (Expected 2 arguments, but got 1., TS2554), und in reinem JavaScript würde derselbe Aufruf zur Laufzeit einen TypeError werfen, weil Destructuring ein Objekt zum Lesen braucht.

Optionale Parameter in Callback-Typen

In einem Funktionstyp bedeutet ?: Der Aufrufer dieses Callbacks übergibt ihn vielleicht nicht. Es bedeutet nicht: Der Callback darf ihn auslassen, denn ein Callback kann nachfolgende Parameter immer ignorieren. Markiere Callback-Parameter also nicht als optional, nur damit Handler weniger Argumente nehmen können.

// Too loose: every handler must now cope with index being undefined
type Visit = (item: string, index?: number) => void;

// Right: the caller always passes both; handlers may use only item
type VisitStrict = (item: string, index: number) => void;
const log: VisitStrict = (item) => console.log(item);