Intermediate · Level 6: TypeScriptIntermediate80 menitBahasa Indonesia

Uji Kompetensi Typed Frontend Boundaries

Checkpoint kesiapan mengetik API response, form values, UI-ready data, reusable helper, dan type boundary yang readable.

StatusMemuat progres

ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

Mengecek pemahaman typed frontend boundaries
Mengetik data boundary tanpa memakai `any` sebagai jalan pintas
Menjelaskan bagaimana data mentah menjadi data siap UI

TypeScriptFrontend BoundariesAssessment

Isi lesson

6 blok

1.
Checkpoint: apakah boundary data kamu sudah jelas?Belum selesaiWajib
2.
QuizBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Docs bridge typed frontend boundariesBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Checkpoint: apakah boundary data kamu sudah jelas?

Wajib

Uji Kompetensi ini mengecek apakah kamu bisa memakai TypeScript di tempat yang paling berguna untuk frontend: data dari API, input user, transform ke UI data shape, reusable helper, dan readability type.

Targetnya bukan membuat type yang rumit. Targetnya membuat data yang masuk ke UI punya bentuk yang jelas, kemungkinan gagal terlihat, dan type tetap bisa dibaca oleh engineer lain.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Typed Frontend Boundaries

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Kenapa API response disebut boundary dalam frontend app?

Coding practice

WajibDibuka di workspace khusus

Checkpoint typed frontend boundary

Latihan akhir mengetik API response, form input, UI-ready data, dan reusable result tanpa membuat type terlalu rumit.

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 otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis catatan singkat tentang boundary data di checkpoint kamu. Jelaskan data mentah masuk dari mana, type apa yang menjaga boundary, dan bagaimana data menjadi siap dipakai UI. Gunakan format: - Data masuk dari: - Type boundary: - Transform ke UI data: - Kenapa tidak memakai any: - Hal yang sengaja belum dibuat rumit:

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/200 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut minimal satu sumber data boundary.
Menyebut type yang menjaga boundary.
Menjelaskan transform dari raw data ke UI-ready data.
Menjelaskan kenapa `any` dihindari.
Menyebut batas yang belum perlu dibuat kompleks.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Docs bridge typed frontend boundaries

Baca dokumentasi TypeScript yang mendukung boundary data sehari-hari. Ambil bagian yang praktis untuk API, form, helper, dan data siap UI.

TypeScript Handbook

Everyday Types

Fokus baca

object type
array type
function parameter dan return type
union type untuk value terbatas

Abaikan dulu

advanced type operators
class-heavy examples

Buka dokumentasi

TypeScript Handbook

Object Types

Fokus baca

property type
optional property
readonly sebagai konsep awal

Abaikan dulu

index signatures lanjutan
mapped types detail

Buka dokumentasi

TypeScript Handbook

Generics

Fokus baca

generic function dasar
type parameter untuk result object
menjaga data tetap spesifik saat helper reusable

Abaikan dulu

generic constraints lanjutan
conditional types

Buka dokumentasi

TypeScript Handbook

Utility Types

Fokus baca

Pick
Omit
Partial
Record

Abaikan dulu

utility type yang jarang dipakai
type manipulation yang terlalu jauh untuk boundary awal

Buka dokumentasi

Aksi setelah membaca

Pilih satu type boundary dari checkpoint kamu, lalu bandingkan dengan contoh object type atau generic di TypeScript Handbook.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

API response, form input, transform data, dan reusable helper adalah boundary penting frontend.
Type boundary yang jelas membuat data lebih aman sebelum masuk UI.
UI-ready data shape mempersiapkan kamu untuk React component.
Readable type lebih berharga daripada type yang terlihat pintar tetapi sulit dirawat.
Berikutnya, kamu siap masuk React Fundamentals dengan data shape dan type boundary yang lebih rapi.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: apakah boundary data kamu sudah jelas?.

Memuat progres Review module