Function: Parameter, Return Type & Function Type

Menulis tipe parameter dan nilai kembalian, parameter opsional dan default, rest parameter, tipe fungsi (callback), arrow function, dan overload.

Part 7 dari 24 ± 50 menit Gratis

Tipe pada fungsi

Fungsi adalah tempat TypeScript paling terasa manfaatnya. Kamu menulis tipe parameter (apa yang masuk) dan tipe kembalian (apa yang keluar):

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

tambah(2, 3)        // ✅ 5
tambah(2)           // ❌ Expected 2 arguments, but got 1
tambah(2, "3")      // ❌ Argument of type 'string' is not assignable to parameter of type 'number'
const teks: string = tambah(1, 2)   // ❌ hasilnya number

Parameter wajib ditulis tipenya. Tipe kembalian boleh dibiarkan (TypeScript menebak dari return), tetapi menuliskannya eksplisit membuat niat jelas dan menangkap kesalahan dini: jika ada jalur yang lupa return, langsung ketahuan.

Parameter opsional dan default

function sapa(nama: string, sapaan?: string): string {   // ? = boleh tidak diisi
  return `${sapaan ?? "Halo"}, ${nama}`
}

function hitungTotal(harga: number, jumlah: number, diskon: number = 0): number {   // nilai default
  return (harga * jumlah * (100 - diskon)) / 100
}
sapa("Ani")             // "Halo, Ani"
hitungTotal(10000, 3)   // 30000, diskon dianggap 0

Parameter opsional harus berada setelah parameter wajib. Parameter dengan nilai default otomatis opsional.

Rest parameter

Untuk menerima jumlah argumen yang bebas, pakai ... dan tipe array:

function jumlahSemua(...angka: number[]): number {
  return angka.reduce((total, n) => total + n, 0)
}
jumlahSemua(1, 2, 3, 4)   // 10

Fungsi sebagai tipe (callback)

Fungsi adalah nilai biasa di JavaScript, jadi bisa dioper ke fungsi lain. Tipenya ditulis seperti arrow function: (parameter) => kembalian.

type Operasi = (a: number, b: number) => number

const kali: Operasi = (a, b) => a * b         // tipe a & b ikut otomatis dari Operasi
const bagi: Operasi = (a, b) => a / b

function terapkan(daftar: number[], fn: (n: number) => number): number[] {
  return daftar.map(fn)
}
terapkan([1, 2, 3], (n) => n * 10)   // [10, 20, 30]

Contextual typing: pada const kali: Operasi = (a, b) => ... kamu tidak perlu menulis tipe a dan b — TypeScript mengambilnya dari Operasi. Inilah sebabnya callback di map/filter tidak perlu anotasi.

void pada callback

Callback yang tidak peduli hasil memakai void:

function ulangi(kali: number, aksi: (i: number) => void): void {
  for (let i = 0; i < kali; i++) aksi(i)
}
ulangi(3, (i) => console.log("ke", i))

Parameter objek dan destructuring

type Opsi = { judul: string; lebar?: number }

function buatKartu({ judul, lebar = 300 }: Opsi): string {
  return `${judul} (${lebar}px)`
}
buatKartu({ judul: "Promo" })   // "Promo (300px)"

Tipenya ditulis untuk seluruh parameter, bukan per variabel hasil destructuring.

Overload: satu fungsi, beberapa bentuk pemanggilan

function ambil(id: number): string
function ambil(nama: string): number
function ambil(x: number | string): string | number {
  return typeof x === "number" ? "item-" + x : x.length
}
const a = ambil(5)        // string
const b = ambil("halo")   // number

Overload berguna bila tipe kembalian bergantung pada tipe argumen. Jangan berlebihan — union biasa sering sudah cukup.

Parameter this (jarang)

Untuk fungsi yang bergantung pada this, tulis this sebagai parameter palsu pertama: function f(this: Pengguna) { ... }. Ia tidak ikut dikirim saat pemanggilan, hanya memberi tahu tipe.

Kesalahan umum pemula

  • Lupa menulis tipe parameter sehingga menjadi any implisit (error di mode strict).
  • Menaruh parameter opsional sebelum parameter wajib.
  • Menulis Function sebagai tipe callback. Tipe itu terlalu longgar; tulis bentuk lengkapnya: (x: number) => string.

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X