Intermediate · Level 6: TypeScriptIntermediate45 menitBahasa Indonesia

Typing API Responses

Memberi type pada data yang datang dari luar app sebelum dipakai untuk render.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan API response sebagai boundary luar aplikasi
Membuat type untuk response object sederhana
Membedakan raw response dan data yang aman dipakai UI

TypeScriptAPI ResponseData Boundary

Isi lesson

5 blok

1.
Data dari API masuk lewat boundaryBelum selesaiWajib
2.
Response sebelum direnderBelum selesaiWajib
3.
Type bukan pengganti validasi runtimeBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Data dari API masuk lewat boundary

Wajib

Di module sebelumnya, kamu sudah membuat union, narrowing, generic result, dan utility type. Sekarang kita pakai skill itu di tempat yang sering membuat bug frontend: boundary data.

Boundary adalah titik saat data masuk, keluar, atau berubah bentuk. API response adalah boundary karena datanya datang dari luar kode UI. TypeScript tidak otomatis menjamin API selalu benar saat runtime, tetapi type yang jelas membuat kode setelah boundary lebih mudah dibaca dan lebih sulit salah pakai.

Bagian ini memengaruhi progres lesson.

Response sebelum dirender

Wajib

type LessonApiResponse = {
  id: string;
  title: string;
  minutes: number;
  published: boolean;
};

function getLessonTitle(response: LessonApiResponse): string {
  return response.title;
}

Type ini mendeskripsikan bentuk data yang kamu harapkan dari API. Setelah function menerima LessonApiResponse, kode di dalamnya bisa memakai property dengan lebih jelas.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Type bukan pengganti validasi runtime

TypeScript membantu saat menulis kode, tetapi response API tetap datang saat app berjalan. Untuk module ini, fokusnya adalah membuat batas data lebih jelas. Runtime schema validation akan dipelajari nanti saat kebutuhan project sudah lebih besar.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Type API response sebelum render

Latihan memberi type pada response lesson sebelum property-nya dipakai untuk UI.

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.

5 cek otomatis3 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

API response adalah boundary karena data datang dari luar app.
Type response membuat property yang diharapkan terlihat jelas.
TypeScript membantu kode setelah boundary, bukan membuktikan server selalu benar.
Hindari `any` di boundary karena justru menghilangkan manfaat TypeScript.
Berikutnya, kamu akan mengetik data yang datang dari user input.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Data dari API masuk lewat boundary.

Memuat progres Review module