FluentStack

Function Types

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate50 menitBahasa Indonesia

Function Types

Memberi type pada parameter dan return value untuk helper function frontend.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menulis type pada function parameter
  • Menulis return type sederhana
  • Membaca error saat argument function salah type
TypeScriptFunctionsReturn Types

Isi lesson

5 blok
  1. 1.
    Function adalah pintu masuk dataBelum selesaiWajib
  2. 2.
    Parameter dan return typeBelum selesaiWajib
  3. 3.
    Baca error dari arah argument ke parameterBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Function adalah pintu masuk data

Wajib

Function menerima input dan mengembalikan output. Jika input salah type, bug bisa muncul di dalam function. TypeScript membuat kontrak function lebih jelas: parameter menerima type apa, dan return value berbentuk apa.

Untuk helper frontend, type function sering membantu saat membuat formatter, calculator kecil, mapper data, atau handler yang menerima object tertentu.

Bagian ini memengaruhi progres lesson.

Parameter dan return type

Wajib
ts
function formatDuration(minutes: number): string {
  return minutes + " menit";
}

function getAverageScore(scores: number[]): number {
  const total = scores.reduce((sum, score) => sum + score, 0);
  return total / scores.length;
}

`minutes: number` berarti parameter harus number. `: string` setelah parameter list berarti function mengembalikan string.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Baca error dari arah argument ke parameter

Jika TypeScript bilang argument type tidak cocok dengan parameter type, cek value yang kamu kirim saat memanggil function. Sering kali masalahnya ada di data pemanggil, bukan di isi function.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Type helper functions

Latihan memberi type pada parameter dan return value helper function.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

3 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Parameter type menjelaskan input yang diterima function.
  • Return type menjelaskan output function.
  • TypeScript mengecek argument saat function dipanggil.
  • Function type membantu helper frontend lebih mudah dipakai ulang.
  • Berikutnya, kamu akan menangani data object yang sebagian property-nya mungkin belum ada.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Function adalah pintu masuk data.