Dasar TypeScript untuk JavaScript Developer
Dasar TypeScript untuk JavaScript Developer
Tingkatkan kualitas kode JavaScript Anda! Pelajari dasar-dasar TypeScript, sistem tipe statis, dan cara menggunakannya untuk membangun aplikasi React yang lebih robust dan mudah di-maintain.
Mulai Belajar Modul Ini
Panduan & Referensi
Belajar Dasar TypeScript untuk JavaScript Developer melalui serangkaian panduan dan referensi yang lengkap serta contoh contoh yang bisa langsung diikuti oleh pemula.
Apa Itu TypeScript?
Capek sama error aneh di JavaScript pas runtime? Kenalan sama TypeScript (TS), superset JavaScript yang nambahin sistem tipe statis buat ngedeteksi error lebih awal dan bikin kodemu makin solid!
Instalasi & Setup TS
Mulai perjalanan TypeScript-mu! Panduan langkah demi langkah untuk menginstal TypeScript Compiler (tsc) menggunakan npm dan membuat file konfigurasi proyek dasar `tsconfig.json`.
Tipe Data Dasar TS
Mulai memberi 'label' pada datamu! Pelajari cara mendeklarasikan variabel dengan tipe data eksplisit di TypeScript dan kenali tipe-tipe dasar seperti string, number, boolean, array, tuple, enum, any, unknown, void, null, dan undefined.
Fungsi Bertipe di TS
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!
Objek, Interface, & Type Aliases TS
Berikan struktur pada datamu! Pelajari cara mendefinisikan bentuk objek di TypeScript menggunakan anotasi tipe inline, Interface, dan Type Aliases untuk kode yang lebih terorganisir dan type-safe.
TypeScript & React: Pengenalan Dasar
Gabungkan kekuatan React dengan keamanan tipe TypeScript! Pelajari cara setup proyek React + TS menggunakan Vite, dan dasar-dasar memberi tipe pada Props, State (useState), dan Event Handler.
Studi Kasus To-Do: Setup & Tipe Data
Mulai bangun aplikasi To-Do List dengan React dan TypeScript! Langkah pertama: setup proyek menggunakan Vite dan mendefinisikan interface TypeScript untuk struktur data tugas (Todo).
Studi Kasus To-Do: Komponen Form & Add
Lanjutkan proyek To-Do List! Bangun komponen `TodoForm.tsx` menggunakan React dan TypeScript untuk menangani input tugas baru dan memanggil fungsi untuk menambahkannya ke daftar.
Studi Kasus To-Do: Komponen List & Item
Lanjutkan proyek To-Do List React+TS! Bangun komponen `TodoList.tsx` untuk merender daftar tugas dan `TodoItem.tsx` untuk menampilkan setiap tugas individual, lengkap dengan props yang diketik.
Studi Kasus To-Do: Fungsi Toggle & Delete
Lengkapi fungsionalitas aplikasi To-Do List React+TS Anda! Pahami alur kerja bagaimana aksi 'toggle selesai' dan 'hapus' pada item tugas memicu update state di komponen utama.
Studi Kasus To-Do: localStorage & Penyempurnaan
Finalisasi aplikasi To-Do List React+TS! Pelajari cara menyimpan daftar tugas ke localStorage agar tidak hilang saat refresh, dan beberapa ide penyempurnaan styling atau fungsionalitas.
Union & Intersection Types di TS
Bikin tipe datamu lebih fleksibel! Pelajari cara menggunakan Union Types untuk variabel yang bisa memiliki salah satu dari beberapa tipe, dan Intersection Types untuk menggabungkan beberapa tipe menjadi satu.
Generics Dasar TS
Tingkatkan fleksibilitas dan keamanan tipe kodemu! Pelajari konsep dasar Generics di TypeScript untuk membuat fungsi, interface, atau class yang bisa bekerja dengan berbagai tipe data secara aman.
Penutup TypeScript & Tips
Kamu berhasil menaklukkan dasar-dasar TypeScript! Rangkuman singkat manfaat utama TypeScript, tips untuk menggunakannya secara efektif, dan arahan ke topik serta sumber belajar lebih lanjut.