Intermediate · Level 6: TypeScriptIntermediate50 menitBahasa Indonesia

Object Types

Mendeskripsikan bentuk object UI dengan property name dan type yang jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menulis type untuk object sederhana
Membaca property dan type di object type
Menggunakan object type untuk data card UI

TypeScriptObject TypesUI Data

Isi lesson

5 blok

1.
Object type menjelaskan bentuk dataBelum selesaiWajib
2.
Type untuk card lessonBelum selesaiWajib
3.
Jangan biarkan object penting menjadi anyBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Object type menjelaskan bentuk data

Wajib

Di frontend, data yang masuk ke UI sering berbentuk object: user card, product card, lesson item, profile, atau form value. TypeScript membantu kamu menulis bentuk object itu secara eksplisit.

Object type menjawab pertanyaan: property apa yang harus ada, dan masing-masing property punya type apa?

Bagian ini memengaruhi progres lesson.

Type untuk card lesson

Wajib

type LessonCard = {
  id: number;
  title: string;
  durationMinutes: number;
  isRequired: boolean;
};

const lesson: LessonCard = {
  id: 1,
  title: "Object Types",
  durationMinutes: 45,
  isRequired: true,
};

`LessonCard` menjelaskan property yang wajib ada. Jika title diisi number atau durationMinutes diisi string, TypeScript akan memberi error.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan biarkan object penting menjadi any

Jika data penting dibiarkan `any`, TypeScript tidak bisa membantu saat property salah ketik atau value salah tipe. Mulai dari type kecil yang menjelaskan shape utama object.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Type user card object

Latihan membuat object type untuk data card user yang siap dipakai 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.

6 cek otomatis3 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Object type menjelaskan shape data.
Setiap property bisa punya type sendiri.
Object type cocok untuk data UI seperti card, profile, product, dan lesson.
Type yang jelas membantu mencegah salah property atau salah value.
Berikutnya, kamu akan memberi type pada function parameter dan return value.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Object type menjelaskan bentuk data.

Memuat progres Review module