F4 · TypeScript dan Web dari Nol

Bahasa web hari ini: dari cara kerja halaman web, JavaScript, dan TypeScript sampai aplikasi Next.js yang memanggil API bertipe.

Course fondasi jalur Full Stack Developer, gratis penuh. Satu proyek dari awal sampai akhir: Dasbor Laporan Warung untuk Bu Sri, pemilik Warung Makmur (fiktif).

---

Posisi di jalur Full Stack Developer

Untuk siapa

• Yang ingin membuat aplikasi web, dari halaman statis sampai aplikasi Next.js dengan API bertipe.
• Prasyarat: F1 dan F3 dianjurkan (atau sudah bisa satu bahasa pemrograman dan memakai terminal serta Git). F2 membantu karena data Warung Makmur sama.
• Yang kamu butuhkan: peramban, akun GitHub gratis, dan laptop dengan Node.js 22 atau GitHub Codespaces.

Kenapa course ini ada

1. Satu bahasa untuk seluruh aplikasi web. Halaman, server, API, dan tes bisa ditulis dalam TypeScript yang sama.
2. Bahasa yang paling banyak dipakai di GitHub. Menurut GitHub Octoverse 2025 (28 Oktober 2025), TypeScript melewati Python dan JavaScript pada Agustus 2025 sebagai bahasa dengan kontributor bulanan terbanyak. GitHub mengaitkannya dengan kerja bersama AI: tipe yang ketat menangkap kesalahan lebih awal.
3. Satu bahasa, banyak tempat. Frontend, backend (Node), edge (misalnya Cloudflare Workers), aplikasi desktop, ekstensi, dan SDK agen AI.

Cara klasik di course ini: web dari dasarnya (HTTP, HTML, DOM, event loop), JavaScript tanpa kerangka kerja, menulis sendiri hal yang biasanya diberikan pustaka (pelari tes mini, router kecil, validasi), dan membaca spesifikasi (WHATWG, ECMAScript, RFC). Cara modern: TypeScript 7 (kompiler native), React 19, Next.js App Router, validasi skema (Zod), tipe yang dihasilkan dari OpenAPI, dan agen AI yang menulis kode, lalu diverifikasi dengan pemeriksa tipe, tes, dan pemahaman cara kerja web.

Cara belajar di course ini

• Mode langkah. Setiap modul tampil layar demi layar: kotak Intinya (3–5 butir) di awal, satu ide per layar dengan contoh lalu pertanyaan cek, animasi dengan jeda tebak, playground bermisi, dan latihan di akhir bagian yang dilatihnya. Tombol Baca penuh menampilkan semua layar dalam satu halaman. Bagian Pendalaman boleh dilewati.
• Contoh TypeScript diperiksa mesin. Setiap keluaran di modul berasal dari menjalankan kodenya dengan Node 22 dan TypeScript 7.0.2.
• Latihan TypeScript dikerjakan di laptop atau Codespaces dengan kerangka di folder _kerangka/ course ini (lihat bagian berikut). Setiap latihan punya kode awal, tes yang boleh kamu baca, petunjuk bertingkat, dan solusi dengan penjelasan.
• Lab Codespaces untuk Node, npm, Next.js, dan deploy (Modul 08, 14–16) ditulis dengan daftar "Selesai bila:" yang kamu periksa sendiri.

Waktu: ±3,5 jam per modul, total ±56 jam.

Menjalankan latihan di laptop atau Codespaces

Kerangka _kerangka/ berisi package.json dan package-lock.json (versi dipatok: TypeScript 7.0.2, React 19.3.1, Zod 4.6.7, jsdom 29.1.1, @types/node 22), tsconfig.json (strict, erasableSyntaxOnly, modul ES, jsx: react-jsx), pembantu tes uji.ts dan uji-react.tsx, serta pelari jalankan.mjs. Butuh Node.js 22.13 atau lebih baru.

cp -r _kerangka latihan-f4 && cd latihan-f4
npm ci                       # memasang versi persis dari package-lock.json

Untuk setiap latihan, buat berkas gabung.ts (atau gabung.tsx untuk React) berisi, berurutan: baris impor pembantu tes, kode awal yang kamu lengkapi, lalu blok tes latihan itu apa adanya.

import { uji, cek, cekSama, cekLempar, cekTolak, cekTipe, keluaran, tangkap, samaDalam, type Sama } from "./uji.ts";
// … kode awal latihan, yang kamu lengkapi …
// … blok tes latihan …

Lalu periksa tipe dan jalankan tesnya:

npx tsc -p .                                          # galat tipe = latihan belum lulus
node jalankan.mjs latihan out/gabung.js hasil.json    # tambah --dom untuk latihan DOM dan React
cat hasil.json                                        # status "lulus", atau tes mana yang gagal dan pesannya

Latihan yang memakai data (laporan.json, laporan-rusak.json, laporan-api.json) membaca berkasnya dari folder kerja: salin dulu dari folder data/ course ini. Di Modul 11 kamu juga menjalankan tes yang sama dengan Vitest.

Lab Next.js (Modul 14–16) memakai TypeScript 5.9.3, karena next build memeriksa tipe lewat API TypeScript yang belum siap di TypeScript 7 (lihat Modul 08).

Silabus (16 modul)

Proyek: Laporan Warung

Warung Makmur (F2) ingin melihat laporan penjualannya dari ponsel. Kamu membangun Dasbor Laporan Warung selangkah demi selangkah: dari halaman HTML statis yang aman, fungsi hitung bertipe, CLI Node, validasi data, sampai aplikasi Next.js yang memanggil API bertipe. Data: data/laporan.json (816 transaksi September 2026 dari dataset F2, dibuat deterministik oleh data/buat_laporan.py), data/laporan-rusak.json (untuk latihan validasi), dan kontrak API data/laporan-api.json (OpenAPI 3.1). Tipe kanonik, nama fungsi, angka rujukan, dan langkah per modul ada di kontrak proyek.

Hubungan dengan course lain