Parámetros opcionales en TypeScript: valores por defecto y rest

Añade ? después del nombre de un parámetro para hacerlo opcional. Quien llama puede omitirlo, y dentro de la función su tipo incluye 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 comprueba el número de argumentos, así que sin el ? la primera llamada sería un error de compilación: Expected 2 arguments, but got 1. (TS2554).

Los parámetros opcionales pueden ser undefined

Como quien llama puede omitirlo, dentro de la función el tipo de un parámetro opcional es T | undefined. Con strictNullChecks debes manejar el caso undefined antes de usarlo como T.

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

El encadenamiento opcional (?.) y el operador de fusión nula (??) son las herramientas habituales aquí. Cuando el valor alternativo es fijo, un parámetro con valor por defecto es más corto.

Valores por defecto de los parámetros

Un valor por defecto hace que el parámetro sea opcional para quien llama y le da un tipo sin undefined dentro de la función. El tipo se infiere a partir del valor por defecto, así que la anotación a menudo sobra.

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

Quien llama ve la firma repeat(text: string, times?: number, separator?: string). Los valores por defecto siguen la regla de JavaScript: se aplican cuando el argumento es undefined, ya sea omitido o pasado de forma explícita, y no cuando es null. Una expresión por defecto puede usar parámetros anteriores: function range(start: number, end = start + 10).

Reglas de orden de los parámetros

Un parámetro con valor por defecto antes de uno obligatorio es válido pero incómodo. Para quien llama su tipo pasa a ser number | undefined, y a nadie le gusta escribir undefined como relleno. Si necesitas un primer parámetro flexible, usa un objeto de opciones o la sobrecarga de funciones.

Omitido frente a undefined

x?: number y x: number | undefined se parecen y tienen el mismo tipo dentro de la función. Se diferencian para quien llama: el primero se puede omitir, el segundo hay que pasarlo.

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();

Usa | undefined para un argumento obligatorio que puede no tener valor, de modo que cada llamada tenga que pensar en ello. Usa ? cuando omitirlo sea una llamada normal. (El mensaje dice de verdad "1 arguments": es la redacción de TypeScript).

Parámetros rest

Un parámetro rest, ...name: T[], recoge cualquier número de argumentos en un array. Tiene que ser el último parámetro.

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">

Expandir un array en parámetros fijos es más estricto. Un parámetro rest acepta la expansión de cualquier number[], pero una función declarada (a: number, b: number) solo acepta la expansión de una tupla, porque TypeScript necesita conocer la longitud:

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

Un parámetro rest también puede tener un tipo tupla, que tipa cada posición: ...args: [name: string, age?: number].

Objetos de opciones

Cuando una función tiene más de dos o tres parámetros opcionales, quien llama pierde la cuenta de las posiciones. Un objeto de opciones con valores por defecto da argumentos con nombre y sin orden.

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

El = {} del final hace opcional el objeto entero. Sin él, fetchData("/a") es un error de compilación (Expected 2 arguments, but got 1., TS2554), y en JavaScript normal la misma llamada lanzaría un TypeError en tiempo de ejecución, porque la desestructuración necesita un objeto del que leer.

Parámetros opcionales en tipos de callback

En un tipo de función, ? significa «quien llama a este callback puede no pasarlo». No significa «el callback puede ignorarlo»: un callback siempre puede ignorar los últimos parámetros. Así que no marques como opcionales los parámetros de un callback solo para que los manejadores puedan recibir menos argumentos.

// 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);