TypeScript Opsiyonel Parametreler, Varsayılan Değerler ve Rest

Bir parametreyi opsiyonel yapmak için adından sonra ? ekleyin. Çağıranlar onu atlayabilir ve fonksiyonun içinde tipi undefined içerir.

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 argüman sayısını kontrol eder, bu yüzden ? olmadan ilk çağrı bir derleme hatası olurdu: Expected 2 arguments, but got 1. (TS2554).

Opsiyonel Parametreler undefined Olabilir

Bir çağıran onu atlayabildiği için opsiyonel bir parametrenin fonksiyon içindeki tipi T | undefined olur. strictNullChecks altında onu bir T olarak kullanmadan önce undefined durumunu ele almanız gerekir.

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

Burada alışılmış araçlar optional chaining (?.) ve nullish coalescing (??) operatörleridir. Yedek değer sabit bir değer olduğunda varsayılan bir parametre daha kısadır.

Varsayılan Parametre Değerleri

Bir varsayılan değer, parametreyi çağıranlar için opsiyonel yapar ve fonksiyonun içinde ona undefined içermeyen bir tip verir. Tip varsayılandan çıkarılır, bu yüzden notasyon çoğu zaman gereksizdir.

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

Çağıran repeat(text: string, times?: number, separator?: string) imzasını görür. Varsayılanlar JavaScript'in kuralını izler: argüman undefined olduğunda uygulanırlar, atlanmış ya da açıkça verilmiş olsun; null olduğunda uygulanmazlar. Bir varsayılan ifadesi önceki parametreleri kullanabilir: function range(start: number, end = start + 10).

Parametre Sırası Kuralları

Zorunlu bir parametreden önce varsayılanlı bir parametre yasaldır ama kullanışsızdır. Çağıranlar için tipi number | undefined olur ve kimse yer tutucu olarak undefined yazmaktan hoşlanmaz. Esnek bir baş parametreye ihtiyacınız varsa bunun yerine bir seçenek nesnesi ya da function overloading kullanın.

Atlamak ile undefined

x?: number ve x: number | undefined birbirine benzer ve fonksiyonun içinde aynı tipe sahiptir. Çağıran açısından ayrılırlar: ilki atlanabilir, ikincisi verilmelidir.

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

Değeri olmamasına izin verilen zorunlu bir argüman için | undefined kullanın, böylece her çağıran onu düşünmek zorunda kalır. Atlamanın normal bir çağrı olduğu durumlarda ? kullanın. (Mesaj gerçekten "1 arguments" diyor: bu TypeScript'in ifadesi.)

Rest Parametreleri

Bir rest parametresi, ...name: T[], istenen sayıda argümanı bir dizide toplar. Son parametre olmalıdır.

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

Bir diziyi sabit parametrelere yaymak daha katıdır. Bir rest parametresi herhangi bir number[] yaymasını kabul eder, ama (a: number, b: number) olarak bildirilmiş bir fonksiyon yalnızca bir tuple yaymasını kabul eder, çünkü TypeScript'in uzunluğu bilmesi gerekir:

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

Bir rest parametresi, her konuma tip veren bir tuple tipine de sahip olabilir: ...args: [name: string, age?: number].

Seçenek Nesneleri

Bir fonksiyonun iki üçten fazla opsiyonel parametresi olduğunda çağıranlar konumları takip edemez hale gelir. Varsayılanlara sahip bir seçenek nesnesi, isimli ve sıradan bağımsız argümanlar sağlar.

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

Sondaki = {}, nesnenin tamamını opsiyonel yapar. O olmadan fetchData("/a") bir derleme hatasıdır (Expected 2 arguments, but got 1., TS2554); düz JavaScript'te de aynı çağrı çalışma zamanında bir TypeError fırlatırdı, çünkü destructuring okunacak bir nesneye ihtiyaç duyar.

Callback Tiplerinde Opsiyonel Parametreler

Bir fonksiyon tipinde ?, "bu callback'i çağıran onu vermeyebilir" anlamına gelir. "Callback onu atlayabilir" anlamına gelmez: bir callback sondaki parametreleri her zaman yok sayabilir. Bu yüzden callback parametrelerini, handler'ların daha az argüman almasına izin vermek için opsiyonel yapmayın.

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