Functions — TypeScript

Typed functions: // Function declaration function tambah(a: number, b: number): number { return a + b; } // Arrow function const kali = (a: number, b…

Di TypeScript, tiap parameter fungsi diberi type, begitu juga nilai yang dikembalikannya. Fungsi jadi mirip formulir di loket: kolom "nama" wajib diisi teks, kolom "catatan" boleh dikosongkan, dan petugasnya berjanji mengembalikan struk, bukan barang lain. TypeScript memeriksa setiap pemanggilan fungsi terhadap formulir itu sebelum kodenya jalan.

🧪 Tebakan cepat: fungsi sapa(nama: string, salam?: string) mengembalikan `${salam}, ${nama}!`. Kamu memanggil sapa("Budi"), dan TypeScript diam saja. Apa yang dikembalikan? Tebak dulu, jawabannya ada di bagian "Parameter opsional dan default".

Type untuk parameter dan return

function tambah(a: number, b: number): number {
  return a + b;
}

tambah(2, 3);   // 5
tambah("5", 3); // error

Arrow function ditulis dengan cara yang sama: const kali = (a: number, b: number): number => a * b;. Return type boleh gak ditulis, karena TypeScript bisa menebaknya dari return. Tapi kalau ditulis, TypeScript ikut mengecek janjimu.

Parameter opsional dan default

Fungsi sapa punya parameter kedua, salam. Ada tiga cara menulisnya, dan hasilnya beda:

Parameter salam sapa("Budi", "Pagi") sapa("Budi") sapa("Budi", "Pagi", "!")
salam: string (wajib) "Pagi, Budi!" error Expected 2 arguments, but got 1. error Expected 2 arguments, but got 3.
salam?: string (opsional) "Pagi, Budi!" "undefined, Budi!" error Expected 1-2 arguments, but got 3.
salam = "Halo" (default) "Pagi, Budi!" "Halo, Budi!" error Expected 1-2 arguments, but got 3.

Semua error jumlah argumen bernomor ts(2554).

function sapa(nama: string, salam?: string): string {
  return `${salam}, ${nama}!`;
}

sapa("Budi"); // "undefined, Budi!"

Tanda ? setelah nama parameter membuatnya opsional: boleh gak dikirim. Di dalam fungsi, type-nya jadi string | undefined. TypeScript membolehkan undefined dicetak di template literal, jadi sapa("Budi") mengembalikan "undefined, Budi!". Itu jawaban tebakannya. Kalau kamu memanggil method string, misalnya salam.toUpperCase(), baru TypeScript protes: 'salam' is possibly 'undefined'. (ts(18048)).

Untuk salam cadangan, pakai nilai default:

function sapa(nama: string, salam = "Halo"): string {
  return `${salam}, ${nama}!`;
}

sapa("Budi");         // "Halo, Budi!"
sapa("Budi", "Pagi"); // "Pagi, Budi!"

salam = "Halo" juga boleh gak dikirim, tapi di dalam fungsi salam selalu string, karena nilai default mengisi kekosongannya. Type-nya ditebak dari nilai default itu, jadi gak perlu ditulis. Parameter dengan ? harus ditaruh setelah parameter wajib; sapa(salam?: string, nama: string) ditolak: A required parameter cannot follow an optional parameter. (ts(1016)).

Return type: void dan undefined

Fungsi yang cuma mencetak, tanpa mengembalikan apa-apa, diberi return type void:

function catat(pesan: string): void {
  console.log(pesan);
}

const hasil = catat("Halo");
hasil.length; // error

Rest parameter: banyak argumen jadi satu array

function jumlahkan(...angka: number[]): number {
  return angka.reduce((total, n) => total + n, 0);
}

console.log(jumlahkan(1, 2, 3)); // 6
console.log(jumlahkan(10, 20));  // 30
console.log(jumlahkan());        // 0
Putaran total sebelum n total sesudah
1 0 1 1
2 1 2 3
3 3 3 6

Nilai awal 0 juga membuat jumlahkan() tanpa argumen tetap mengembalikan 0. Tanpa nilai awal, array kosong bikin error saat jalan: Reduce of empty array with no initial value.

⚠️ Jebakan yang sering ketemu

TL;DR: Tiap parameter diberi type (a: number) dan return type ditulis setelah kurung tutup (): number). TypeScript menolak argumen yang salah type atau salah jumlah (Expected 2 arguments, but got 1.). salam?: string membuat parameter opsional, tapi isinya bisa undefined; salam = "Halo" memberi nilai default. void untuk fungsi yang gak mengembalikan apa-apa, dan hasilnya gak boleh dipakai. ...angka: number[] mengumpulkan semua argumen jadi array; jumlahkan dengan reduce((total, n) => total + n, 0) supaya jumlahkan(1, 2, 3) = 6 dan jumlahkan() = 0.

Yang akan kamu pelajari