Parameter Opsional TypeScript: Nilai Default dan Rest

Tambahkan ? setelah nama parameter untuk membuatnya opsional. Pemanggil boleh tidak mengisinya, dan di dalam fungsi tipenya ikut memuat 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 mengecek jumlah argumen, jadi tanpa ? pemanggilan pertama akan menjadi error kompilasi: Expected 2 arguments, but got 1. (TS2554).

Parameter Opsional Mungkin Bernilai undefined

Karena pemanggil bisa melewatinya, tipe parameter opsional di dalam fungsi adalah T | undefined. Dengan strictNullChecks, kamu harus menangani kasus undefined sebelum memakainya sebagai 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

Optional chaining (?.) dan nullish coalescing (??) adalah alat yang biasa dipakai di sini. Kalau nilai cadangannya tetap, parameter default lebih ringkas.

Nilai Default Parameter

Nilai default membuat parameter opsional bagi pemanggil dan memberinya tipe tanpa undefined di dalam fungsi. Tipenya disimpulkan dari nilai default, jadi anotasi sering tidak diperlukan.

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

Pemanggil melihat signature repeat(text: string, times?: number, separator?: string). Nilai default mengikuti aturan JavaScript: dipakai saat argumennya undefined, baik dilewati maupun dikirim secara eksplisit, dan tidak dipakai saat argumennya null. Ekspresi default boleh memakai parameter sebelumnya: function range(start: number, end = start + 10).

Aturan Urutan Parameter

Parameter dengan default sebelum parameter wajib memang sah, tetapi canggung. Bagi pemanggil, tipenya menjadi number | undefined, dan tidak ada yang senang menulis undefined sebagai pengisi tempat. Kalau kamu butuh parameter pertama yang fleksibel, pakai options object atau function overloading.

Dilewati vs undefined

x?: number dan x: number | undefined terlihat mirip dan punya tipe yang sama di dalam fungsi. Bedanya ada bagi pemanggil: yang pertama boleh dilewati, yang kedua wajib dikirim.

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

Pakai | undefined untuk argumen wajib yang boleh tidak punya nilai, sehingga setiap pemanggil harus memikirkannya. Pakai ? kalau melewatinya adalah pemanggilan yang normal. (Pesannya memang berbunyi "1 arguments": begitulah kata-kata TypeScript.)

Rest Parameter

Rest parameter, ...name: T[], mengumpulkan argumen sebanyak apa pun ke dalam sebuah array. Parameter ini harus berada di posisi terakhir.

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

Melakukan spread array ke parameter tetap lebih ketat. Rest parameter menerima spread dari number[] apa pun, tetapi fungsi yang dideklarasikan (a: number, b: number) hanya menerima spread dari tuple, karena TypeScript harus tahu panjangnya:

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

Rest parameter juga bisa bertipe tuple, yang memberi tipe pada setiap posisi: ...args: [name: string, age?: number].

Options Object

Begitu sebuah fungsi punya lebih dari dua atau tiga parameter opsional, pemanggil mulai kehilangan jejak posisinya. Options object dengan nilai default memberi argumen bernama yang urutannya bebas.

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

= {} di bagian akhir membuat seluruh object itu opsional. Tanpanya, fetchData("/a") adalah error kompilasi (Expected 2 arguments, but got 1., TS2554), dan di JavaScript biasa pemanggilan yang sama akan melempar TypeError saat runtime, karena destructuring butuh object untuk dibaca.

Parameter Opsional di Tipe Callback

Di tipe fungsi, ? berarti "pemanggil callback ini mungkin tidak mengirimnya". Artinya bukan "callback boleh melewatinya": callback selalu boleh mengabaikan parameter di bagian akhir. Jadi jangan tandai parameter callback sebagai opsional hanya supaya handler boleh menerima argumen lebih sedikit.

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