Kuasai cara mendefinisikan tipe untuk parameter yang diterima fungsi dan tipe untuk nilai yang dikembalikan (return type) oleh fungsi di TypeScript. Buat kodemu lebih prediktabel!
17m bacaanKuis WajibMicro Badge Lesson
Fungsi Jadi Lebih "Pinter": Ngasih Tipe ke Parameter & Return Value di TypeScript!
Udah kenalan kan sama fungsi di JavaScript (lihat materi Fungsi Dasar JS)? Fungsi itu "resep" kode yang bisa kita pake ulang. Nah, di TypeScript, kita bisa bikin "resep" ini jadi jauh lebih jelas dan aman dengan ngasih tipe data ke parameter yang dia terima dan ke nilai yang dia kembaliin (return value).
Ini penting banget buat:
Nangkep error lebih awal: Kalau kita salah ngasih jenis data pas manggil fungsi, atau fungsi kita salah ngembaliin jenis data, TypeScript bakal langsung ngasih tau.
Kode jadi lebih gampang dibaca: Orang lain (atau kita sendiri di masa depan) jadi langsung ngerti fungsi ini butuh input apa dan bakal ngasilin output apa.
Auto-completion yang lebih akurat dari Code Editor (seperti VS Code).
1. Ngasih Tipe ke Parameter Fungsi
Pas kamu ngedefinisiin fungsi, kamu bisa nambahin type annotation setelah nama tiap parameternya.
Sintaks: function namaFungsi(parameter1: TipeData1, parameter2: TipeData2) { ... }
Contoh:
typescript
function sapaPengguna(nama: string, usia: number): void { console.log(`Halo, ${nama}! Kamu berusia ${usia} tahun.`);}sapaPengguna("Budi", 25); // Oke// sapaPengguna(25, "Budi"); // ERROR! Tipe argumen tidak cocok dengan parameter.// sapaPengguna("Siti"); // ERROR! Butuh dua argumen, baru dikasih satu.function tambah(a: number, b: number) { // Return type-nya akan di-infer jadi 'number' return a + b;}let hasil: number = tambah(5, 10); // Oke// let hasilSalah: string = tambah(5, 10); // ERROR! Hasil 'tambah' itu number, gak bisa di-assign ke string.
Kalau kamu gak ngasih tipe ke parameter, dan opsi "noImplicitAny" di tsconfig.json-mu true (bagian dari "strict": true), TypeScript bakal ngasih error karena dia gak mau parameter itu punya tipe any secara implisit. Jadi, selalu biasain ngasih tipe ke parameter fungsi ya!
2. Ngasih Tipe ke Nilai Kembali (Return Type) Fungsi
Selain parameter, kamu juga bisa (dan sangat disarankan buat) ngasih tau TypeScript tipe data apa yang bakal di-return sama fungsingmu. Type annotation buat return type ditaruh setelah kurung tutup parameter () dan sebelum kurung kurawal buka {.
Sintaks: function namaFungsi(param: Tipe): TipeReturn { ... return nilaiDenganTipeReturn; }
Contoh:
typescript
function kaliDua(angka: number): number { // Fungsi ini dijamin ngembaliin number return angka * 2;}let jawaban: number = kaliDua(7); // Oke, jawaban jadi 14// let teksJawaban: string = kaliDua(7); // ERROR! kaliDua ngembaliin number, bukan string.function apakahDewasa(umur: number): boolean { // Dijamin ngembaliin boolean return umur >= 18;}let statusDewasa: boolean = apakahDewasa(20); // Oke// Fungsi yang gak nge-return apa-apa (void)function tampilkanPesan(pesan: string): void { console.log(pesan); // Gak ada return statement, atau cuma 'return;'}tampilkanPesan("Ini pesan penting!");
Kalau kamu nulis return type, TypeScript bakal ngecek apakah nilai yang bener-bener kamu return di dalem fungsi itu udah cocok sama tipe yang kamu janjiin. Kalau gak cocok, dia bakal protes.
Type Inference untuk Return Type:
Kalau kamu gak nulis return type secara eksplisit, TypeScript biasanya cukup pinter buat nebak (infer) return type-nya berdasarkan apa yang kamu return di dalem fungsi.
typescript
function kurang(a: number, b: number) { // TS bakal nebak return type-nya 'number' return a - b;}
Meskipun bisa ditebak, praktik terbaiknya adalah tetep nulis return type secara eksplisit, apalagi buat fungsi yang logikanya agak kompleks atau diekspor buat dipake di modul lain. Ini bikin intensi kodemu jadi lebih jelas.
3. Parameter Opsional (Optional Parameters)
Kadang, ada parameter fungsi yang gak wajib diisi pas fungsi dipanggil. Kamu bisa nandain parameter itu sebagai opsional dengan nambahin tanda tanya ? setelah nama parameternya dan sebelum titik dua tipe datanya.
Parameter opsional harus ditaruh setelah semua parameter wajib.
Kalau parameter opsional gak dikasih argumen pas fungsi dipanggil, nilainya di dalem fungsi bakal jadi undefined.
4. Nilai Default Parameter (Default Parameters - Fitur ES6, juga didukung TS)
Selain parameter opsional, kamu juga bisa ngasih nilai default ke parameter. Kalau pas fungsi dipanggil argumen buat parameter itu gak dikasih (atau dikasih undefined), parameter itu bakal pake nilai default-nya.
Parameter dengan nilai default otomatis dianggap opsional.
Kamu bisa naruh parameter dengan nilai default di mana aja (gak harus di akhir kayak parameter opsional ?).
Contoh:
typescript
function buatPesan(pesan: string, pengirim: string = "Admin"): string { return `Pesan dari ${pengirim}: ${pesan}`;}console.log(buatPesan("Selamat datang!")); // Output: Pesan dari Admin: Selamat datang!console.log(buatPesan("Ada update baru.", "Berita Tim")); // Output: Pesan dari Berita Tim: Ada update baru.
Kalau parameter punya nilai default, kamu gak perlu ngasih type annotation lagi ke parameter itu kalau TypeScript bisa nebak tipenya dari nilai default-nya (misal, pengirim = "Admin" otomatis ditebak string). Tapi, nulis tipenya eksplisit tetep praktik yang bagus.
5. Rest Parameters (...) - Nangkep Banyak Argumen Jadi Array
Kalau kamu mau bikin fungsi yang bisa nerima jumlah argumen yang gak pasti (variable number of arguments) buat parameter tertentu, kamu bisa pake rest parameters.
Ditulis pake tiga titik (...) sebelum nama parameter terakhir.
Semua sisa argumen yang dikasih pas fungsi dipanggil bakal dikumpulin jadi satu array di parameter rest itu.
Cuma boleh ada satu rest parameter per fungsi, dan dia harus jadi parameter terakhir.
Contoh:
typescript
function jumlahkanSemuaAngka(...daftarAngka: number[]): number { let total = 0; for (const angka of daftarAngka) { // Loop lewat array daftarAngka total += angka; } return total;}console.log(jumlahkanSemuaAngka(1, 2, 3)); // Output: 6console.log(jumlahkanSemuaAngka(10, 20, 30, 40, 50)); // Output: 150console.log(jumlahkanSemuaAngka(5)); // Output: 5console.log(jumlahkanSemuaAngka()); // Output: 0function gabungString(pemisah: string, ...kata: string[]): string { return kata.join(pemisah);}console.log(gabungString("-", "belajar", "typescript", "itu", "asyik"));// Output: belajar-typescript-itu-asyik
Function Types: Mendefinisikan "Bentuk" Sebuah Fungsi
Kadang, kita mau ngedefinisiin "bentuk" atau "tanda tangan" (signature) dari sebuah fungsi tanpa langsung ngimplementasiinnya, atau kita mau pake tipe fungsi itu sebagai tipe buat variabel atau parameter lain. Di sinilah Function Types berguna.
// Mendefinisikan tipe 'OperasiMatematika' yang nerima 2 angka dan ngembaliin angkatype OperasiMatematika = (x: number, y: number) => number;let fungsiTambah: OperasiMatematika = function(a, b) { // TS bisa infer a, b itu number return a + b;};let fungsiKali: OperasiMatematika = (a, b) => a * b; // Pake arrow functionconsole.log(fungsiTambah(5, 3)); // Output: 8console.log(fungsiKali(5, 3)); // Output: 15// Contoh penggunaan di parameter fungsi lainfunction hitung(angka1: number, angka2: number, operasi: OperasiMatematika): number { return operasi(angka1, angka2);}console.log(hitung(10, 2, fungsiTambah)); // Output: 12console.log(hitung(10, 2, fungsiKali)); // Output: 20
Function types ini ngebantu banget buat bikin kode yang lebih abstrak dan reusable, terutama pas kerja sama fungsi callback atau di arsitektur yang lebih kompleks.
Dengan ngasih tipe ke parameter dan return value fungsi, kodemu jadi jauh lebih "jujur" dan gampang diprediksi. TypeScript bakal jadi asisten pribadimu yang ngingetin kalau ada yang gak beres sama "kontrak" tipe fungsingmu. Ini adalah salah satu fitur paling powerful dari TypeScript buat nulis kode yang lebih solid!
Checkpoint KuisTarget: 70%
Kuis Fungsi Bertipe di TypeScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
