F4 · Kamus istilah
Istilah F4 · TypeScript dan Web dari Nol
Penjelasan singkat untuk istilah, fungsi, dan rumus yang dipakai di course ini. Di dalam modul, istilah bergaris titik bisa diketuk untuk melihat kartu yang sama.
Kembali ke daftar modul F4219 dari 219 istilah
@ts-expect-errorjuga: @ts-ignoreKomentar yang menuntut baris berikutnya galat tipe; bila baris itu ternyata lolos,
tscmelapor penanda tidak terpakai.@ts-ignoremembungkam galat tanpa syarat dan tidak pernah gagal, jadi tidak dipakai di tes.Contoh:
// @ts-expect-error metode kartu tidak dikenaldi ataslabelMetode("kartu").Dipelajari di Modul 06 · Desain dengan tipe
AbortSignaljuga: AbortController, AbortSignal.timeout, AbortSignal.anySinyal pembatalan dari standar WHATWG DOM yang diberikan ke operasi seperti
fetch.AbortControllermemegang tombol batal,AbortSignal.timeout(ms)batal sendiri, danAbortSignal.anybatal begitu salah satu sinyal batal. Berbeda denganPromise.race, sinyal sungguh menghentikan pekerjaan.Contoh:
fetch(url, { signal: AbortSignal.timeout(10_000) }).Dipelajari di Modul 09 · Asinkron
ADRjuga: Architecture Decision Record, catatan keputusan arsitektur
Catatan satu halaman untuk satu keputusan desain: konteks, keputusan, alternatif yang ditolak, konsekuensi, dan risiko. Formatnya dari Michael Nygard (2011).
Contoh: "CSP bernonce, bukan CSP statis dengan 'unsafe-inline'".
Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
AggregateErrorGalat bawaan yang membungkus beberapa galat sekaligus di
errors, dengan satumessageyang merangkumnya.Contoh:
new AggregateError(galat, "2 pendengar gagal untuk peristiwa transaksi").Dipelajari di Modul 07 · Kelas, modul, dan galat
allowlistjuga: daftar izin
Daftar hal yang diizinkan; semua yang tidak ada di daftar ditolak. Lebih aman daripada daftar larangan karena kamu tidak perlu tahu semua bentuk yang berbahaya.
Contoh: tautan hanya dibuat bila skemanya
http:atauhttps:.Dipelajari di Modul 01 · Cara kerja web
anotasi tipejuga: type annotation
Keterangan tipe yang ditulis sesudah titik dua, seperti
: stringatau: number[]. Mirip type hint Python, tetapi di TypeScript benar-benar diperiksa.Contoh:
const harga: number = 3500;Dipelajari di Modul 01 · Cara kerja web
antrean tugasjuga: task, macrotask, task queue
Antrean callback timer, event klik, data jaringan yang tiba, dan callback I/O. Event loop mengambil satu tugas per putaran, setelah antrean mikrotugas kosong.
Contoh:
setTimeout(() => console.log("b"), 0)menaruh satu tugas.Dipelajari di Modul 09 · Asinkron
anyTipe yang mematikan pemeriksaan: semua operasi diizinkan dan hasilnya ikut
any.JSON.parsemengembalikanany, jadi data dari luar masuk tanpa diperiksa bila tidak dihentikan.Dipelajari di Modul 04 · Tipe di TypeScript
ARIAjuga: aria-invalid, aria-describedby, aria-live
Atribut yang memberi tahu teknologi bantu arti dan keadaan elemen:
aria-invalid="true"untuk isian tidak sah,aria-describedbyuntuk menautkan pesan galat, danaria-liveataurole="alert"untuk pengumuman.Contoh:
<input id="jumlah" aria-describedby="galat-jumlah">membuat pesan galat dibacakan saat isian difokus.Dipelajari di Modul 10 · DOM, event, dan formulir
as constPenanda yang menganggap sebuah nilai tidak akan pernah berubah: semua medan menjadi
readonly, literal tetap literal, dan array menjadi tuplereadonly. Tidak memaksa tipe sepertias T.Contoh:
["tunai", "qris", "transfer"] as constbertipereadonly ["tunai", "qris", "transfer"].Dipelajari di Modul 06 · Desain dengan tipe
awaitjuga: async, fungsi asyncKata kunci yang menangguhkan fungsi
async(bukan seluruh program) sampai sebuah Promise tuntas, lalu melanjutkan dengan nilainya atau melempar alasannya. Fungsiasyncselalu mengembalikan Promise, danawaithanya sah di dalamnya atau di tingkat atas modul ES.Contoh:
const teh = await hargaTeh();di dalamtry/catch.Dipelajari di Modul 09 · Asinkron
batas sistemjuga: system boundary
Garis antara data dari luar dan kode kita: respons jaringan, badan permintaan, berkas unggahan,
localStorage, parameter URL, dan variabel lingkungan. Di sana tipe TypeScript tidak berlaku, jadi bentuk data dibuktikan saat berjalan.Contoh:
parseLaporandi akhirmuatLaporan.Dipelajari di Modul 12 · Data di batas sistem
BigInt
Tipe bilangan bulat tanpa batas panjang, ditulis dengan akhiran
n. Tidak bisa dicampur dengan number dalam satu operasi tanpa konversi eksplisit.Contoh:
123456789012345678n + 1ntepat123456789012345679n.Dipelajari di Modul 02 · JavaScript dari kacamata Python
bilangan bulat amanjuga: batas aman, MAX_SAFE_INTEGER
Bilangan bulat yang bisa disimpan tepat sebagai number: sampai 2⁵³ − 1 = 9.007.199.254.740.991 (
Number.MAX_SAFE_INTEGER). Di atasnya angka dibulatkan diam-diam; periksa denganNumber.isSafeInteger.Contoh:
2 ** 53 + 1 === 2 ** 53bernilaitrue.Dipelajari di Modul 02 · JavaScript dari kacamata Python
bindjuga: call, applyMetode fungsi yang mengembalikan fungsi baru dengan
this(dan boleh beberapa argumen awal) terikat selamanya.calldanapplymemanggil langsung denganthistertentu.Contoh:
keranjang.tambah.bind(keranjang).Dipelajari di Modul 03 · Fungsi, closure, dan `this`
cakupan kodejuga: code coverage
Ukuran baris atau cabang kode yang dijalankan rangkaian tes. Cakupan rendah pasti buruk, tetapi cakupan tinggi tidak berarti tes memeriksa hasilnya.
Contoh: satu kasus
formatRupiah(25000)sudah mencakup 100% baris.Dipelajari di Modul 11 · Pengujian
cakupan leksikaljuga: lexical scope
Aturan bahwa fungsi melihat variabel dari tempat ia ditulis, bukan tempat ia dipanggil. Nama dicari dari blok terdalam ke luar sampai modul dan global.
Dipelajari di Modul 03 · Fungsi, closure, dan `this`
callback
Fungsi yang dikirim ke fungsi lain untuk dipanggil nanti. Ditulis tanpa kurung saat dikirim, karena yang dikirim fungsinya, bukan hasil memanggilnya.
Contoh:
harga.map(String),daftar.forEach((x) => kasir.catat(x)).Dipelajari di Modul 03 · Fungsi, closure, dan `this`
causeProperti
Error(ES2022) yang menyimpan galat asal penyebabnya, diisi lewatnew Error(pesan, { cause }). Informasi teknis tidak hilang walaupun pesannya berbicara dalam bahasa proyek.Contoh:
new GalatLaporan("format", "laporan.json bukan JSON yang sah", { cause: e }).Dipelajari di Modul 07 · Kelas, modul, dan galat
Client Componentjuga: "use client"
Komponen di bawah direktif
"use client"yang dikirim ke peramban dan dihidupkan di sana; tetap dirender juga di server untuk HTML awal. Direktif itu batas: semua yang diimpor ikut ke bundel klien.Contoh:
TabelProdukmemakaiuseState, jadi berkasnya diawali"use client".Dipelajari di Modul 14 · Next.js App Router
closure
Fungsi beserta lingkungan tempat ia dibuat. Ia tetap bisa membaca dan mengubah variabel fungsi pembungkusnya walau fungsi itu sudah selesai, karena yang diingat adalah variabelnya, bukan salinan nilainya.
Contoh:
diskon(17)mengembalikan fungsi yang mengingatpersen= 17.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
Cloudflare Workersjuga: Worker, workerd, isolate
Platform yang menjalankan kode di isolate V8 (runtime
workerd) di pusat data dekat pengguna. Tidak ada sistem berkas yang bisa dibaca saat jalan, ada batas waktu CPU per permintaan, dan API Node tersedia sebagian.Contoh:
lib/data.tsmengimpor JSON agar data dibundel saat build.Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
code point
Nomor Unicode untuk satu karakter. Iterasi string di JavaScript (
[...teks],for…of) berjalan per code point, sedangkan.lengthdansliceper unit UTF-16.Contoh:
[..."😀"].lengthadalah 1.Dipelajari di Modul 02 · JavaScript dari kacamata Python
compatibility_dateTanggal di konfigurasi Wrangler yang mematok perilaku runtime Workers, sehingga pembaruan platform tidak mengubah perilaku aplikasimu diam-diam; mirip lockfile untuk runtime.
Contoh:
"compatibility_date": "2026-07-22".Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
conditional typejuga: tipe bersyarat
ifdi dunia tipe:T extends U ? X : Y. BilaTparameter tipe yang diisi union, kondisinya diterapkan ke setiap anggota (distribusi);infermenangkap bagian tipe untuk dipakai di cabang benar.Contoh:
Exclude<"tunai" | "qris" | "transfer", "qris">adalah"tunai" | "transfer".Dipelajari di Modul 06 · Desain dengan tipe
constjuga: letKata untuk mendeklarasikan variabel yang tidak boleh diisi ulang;
letuntuk yang boleh. Keduanya hanya hidup di dalam blok{ … }tempat ia dideklarasikan.constmengunci variabelnya, bukan isi objeknya.Contoh:
const keranjang = []; keranjang.push("teh");sah.Dipelajari di Modul 02 · JavaScript dari kacamata Python
Constraint Validation APIjuga: validity, ValidityState, setCustomValidity
Validasi bawaan HTML dari atribut
required,type,min,max,step, danpattern, yang hasilnya dibaca lewatinput.validitydan diatur dengansetCustomValidity. Membantu pengguna, tetapi tidak menggantikan validasi server.Contoh:
requiredmenganggap isian" "sudah terisi.Dipelajari di Modul 10 · DOM, event, dan formulir
Core Web Vitalsjuga: LCP, INP, CLS
Tiga ukuran kinerja dari pengguna sungguhan, dinilai pada persentil ke-75 kunjungan: LCP ≤ 2,5 detik, INP ≤ 200 milidetik, CLS ≤ 0,1.
Contoh: HTML dari Server Component mempercepat LCP; sedikit JavaScript klien membantu INP.
Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
CSPjuga: Content Security Policy, nonce
Kepala respons yang memberi tahu peramban sumber mana yang boleh dimuat dan dijalankan. Dengan nonce per permintaan, skrip sisipan penyerang tidak dijalankan walau ada celah XSS.
Contoh:
script-src 'self' 'nonce-…' 'strict-dynamic'.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
CSRFjuga: cross-site request forgery
Serangan ketika situs lain memicu permintaan pengubah data ke situsmu, dan peramban melampirkan cookie pengguna yang sedang masuk. Penyerang tidak membaca jawabannya, tetapi efek sampingnya terjadi.
Contoh: formulir tersembunyi di situs lain mengirim
POST /api/kasbonatas nama Bu Sri.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
dangerouslySetInnerHTMLjuga: sanitizerProp React yang memasukkan string sebagai HTML mentah, sama seperti
innerHTML. Data pengguna hanya boleh masuk lewat sini sesudah dibersihkan sanitizer yang terawat.Contoh: nama produk
<img src=x onerror=…>dijalankan peramban bila dimasukkan lewat prop ini.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
datasetjuga: atribut dataAkses ke atribut
data-*sebuah elemen: awalandata-dibuang dan tanda hubung menjadi camelCase. Nilainya selalu string.Contoh:
data-produk-id="12"terbaca sebagaili.dataset.produkId, bernilai"12".Dipelajari di Modul 10 · DOM, event, dan formulir
debouncejuga: jeda ketik
Menunda pekerjaan sampai event berhenti datang selama waktu tertentu; setiap event baru mengulang tundaan dari awal.
Contoh: pencarian produk baru menyaring setelah Bu Sri berhenti mengetik selama
tungguMs.Dipelajari di Modul 10 · DOM, event, dan formulir
delegasi eventjuga: event delegation
Teknik memasang satu pendengar di leluhur untuk banyak elemen, memanfaatkan bubbling: pendengar memeriksa
e.target.closest(...)saat event terjadi, sehingga elemen yang ditambahkan kemudian ikut tertangani.Contoh: satu pendengar di
<tbody>menangani tombol "Detail" di 816 baris.Dipelajari di Modul 10 · DOM, event, dan formulir
dependensi silumanjuga: phantom dependency
Paket yang dipakai sebuah paket tanpa dicantumkan sebagai dependensinya; ia bekerja kebetulan selama npm menaruhnya di
node_modulesteratas.Contoh:
Cannot find package 'esbuild'dari OpenNext, diperbaiki dengan memasangesbuildsecara eksplisit.Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
dependensi transitifjuga: dependensi langsung
Paket yang terpasang karena dibutuhkan paket lain, bukan karena kamu menyebutnya di
package.json. Dependensi langsung adalah yang kamu sebut sendiri.Contoh:
undici-typesdipasang karena dibutuhkan@types/node.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
destructuringjuga: membongkar objek
Mengambil beberapa properti objek atau elemen array sekaligus ke variabel, termasuk langsung di parameter fungsi. Pengganti argumen kata kunci Python.
Contoh:
function kartu({ nama, harga, satuan = "pcs" }).Dipelajari di Modul 03 · Fungsi, closure, dan `this`
devDependenciesPaket yang hanya dibutuhkan saat mengembangkan, misalnya kompiler dan tes, bukan saat program berjalan.
Contoh:
typescriptdan@types/nodedi proyeklaporan-warung.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
discriminated unionjuga: union terdiskriminasi, medan pembeda
Union beberapa bentuk objek yang semuanya punya satu medan literal pembeda.
switchpada medan itu mempersempit tipe di setiap cabang, dan pemeriksaannevermemaksa setiap bentuk ditangani.Contoh:
Mutasidenganjenis: "masuk" | "jual" | "opname"; hanya bentuk opname yang punyastokBaru.Dipelajari di Modul 05 · Objek, array, dan generic
DOMjuga: Document Object Model
Pohon objek hasil penguraian HTML oleh peramban. Setiap elemen menjadi simpul, dan JavaScript membaca serta mengubah halaman lewat pohon ini.
Contoh: pengurai menyisipkan
<tbody>ke tabel, jadi DOM bisa berbeda dari teks HTML sumbernya.Dipelajari di Modul 01 · Cara kerja web
ECMAScriptjuga: ECMA-262, ES2023, ES2024
Nama resmi bahasa JavaScript, ditetapkan komite TC39 dalam spesifikasi ECMA-262. Satu edisi terbit setiap Juni; fitur baru harus didukung runtime dan dikenal pengaturan
libTypeScript.Dipelajari di Modul 02 · JavaScript dari kacamata Python
elemen Reactjuga: React element
Objek biasa yang mendeskripsikan UI: jenis, props, dan
key. Membuatnya tidak menyentuh DOM; React yang kemudian menerapkannya. Elemen asli ditandai medan tersembunyi$$typeofberisiSymbol.Contoh:
<h1 className="judul">Laporan</h1>punyatype"h1"danprops{ className: 'judul', children: 'Laporan' }.Dipelajari di Modul 13 · React dasar
elemen semantikjuga: HTML semantik
Elemen HTML yang menyatakan arti bagiannya, seperti
<main>,<header>,<section>, dan<footer>. Tampilannya sama dengan<div>, tetapi pembaca layar bisa memakainya untuk melompat antarbagian.Dipelajari di Modul 01 · Cara kerja web
enumSintaks TypeScript untuk himpunan nama tetap yang menghasilkan kode JavaScript (objek dengan pemetaan dua arah). Karena itu ditolak
erasableSyntaxOnlydengan TS1294; penggantinya objekas constditambah tipe bernama sama.Contoh:
const KodeKeluar = { SUKSES: 0, GALAT_DATA: 1, PEMAKAIAN: 2 } as const.Dipelajari di Modul 06 · Desain dengan tipe
Environment Recordjuga: lingkungan, rantai cakupan
Istilah spesifikasi ECMAScript untuk tabel nama → nilai satu cakupan. Setiap panggilan fungsi membuat yang baru, bertaut ke lingkungan pembungkusnya; closure menunjuk lingkungan tempat fungsinya dibuat.
Dipelajari di Modul 03 · Fungsi, closure, dan `this`
erasableSyntaxOnly
Opsi
tsc(sejak 5.8) yang menolak sintaks TypeScript yang menghasilkan kode, sepertienum,namespace, dan parameter property, sehingga setiap berkas bisa dijalankan dengan sekadar menghapus tipe.Contoh:
enum Metode { Tunai }ditolak denganerror TS1294.Dipelajari di Modul 04 · Tipe di TypeScript
escapingjuga: escape, meng-escape, di-escape
Mengganti karakter yang punya arti khusus dengan bentuk yang hanya berarti teks, sesuai tempat data disisipkan. Di HTML:
&dulu, lalu<,>,", dan'.Contoh:
Kacang & KerupukmenjadiKacang & Kerupuk.Dipelajari di Modul 01 · Cara kerja web
event loopjuga: perulangan event
Mekanisme yang menjalankan JavaScript di satu utas: ambil satu tugas, jalankan sampai tumpukan panggilan kosong, kosongkan seluruh antrean mikrotugas, (di peramban) mungkin menggambar, lalu ulangi. Node memakai libuv dengan fase timers, poll, dan check.
Contoh:
setTimeout(fn, 0)baru berjalan setelah skrip dan semua mikrotugas selesai.Dipelajari di Modul 09 · Asinkron
falsyjuga: truthy, truthiness
Nilai yang dianggap salah dalam
if,&&,||, dan!. Di JavaScript hanya delapan:false,0,-0,0n,"",null,undefined, danNaN. Semua yang lain truthy, termasuk array dan objek kosong.Contoh:
if ([])tetap masuk ke cabangnya.Dipelajari di Modul 02 · JavaScript dari kacamata Python
fase eventjuga: capture, bubble, bubbling, eventPhase
Tiga tahap perjalanan event menurut standar DOM: capture (dari
windowturun ke target), target, lalu bubble (naik kembali). Pendengar biasa berjalan di bubble; pendengar{ capture: true }di capture.Contoh: klik pada tombol menjalankan
luar-capture, laludalam, laluluar-bubble.Dipelajari di Modul 10 · DOM, event, dan formulir
fetchFungsi bawaan peramban dan Node untuk mengirim permintaan HTTP. Hasilnya
Response, yang badannya dibaca denganawait res.text()atauawait res.json().Contoh:
const res = await fetch("/api/ringkasan");Dipelajari di Modul 01 · Cara kerja web
finallyBlok sesudah
try/catchyang selalu dijalankan, baik selesai normal,return, maupun melempar. Tempatnya membereskan sumber daya;returndi dalamnya menelan galat.Contoh:
finally { console.log("selesai memeriksa"); }dibacaJumlah.Dipelajari di Modul 07 · Kelas, modul, dan galat
FormDataObjek berisi pasangan nama dan nilai dari sebuah formulir. Semua nilainya string (atau
File); kotak centang yang tidak dicentang dan isiandisabledtidak ada, dan spasi ikut terkirim.Contoh:
new FormData(form).get("jumlah")bernilai"25000", bukan angka.Dipelajari di Modul 10 · DOM, event, dan formulir
fragmenjuga: fragment
Bagian URL sesudah
#. Dipakai peramban untuk melompat ke bagian halaman dan tidak pernah dikirim ke server.Contoh:
#ringkasanpada/laporan#ringkasan.Dipelajari di Modul 01 · Cara kerja web
fungsi murnijuga: pure function, kekekalan
Fungsi yang selalu memberi hasil sama untuk masukan sama dan tidak mengubah apa pun di luar dirinya, terutama argumennya. Boleh membuat dan mengisi array baru miliknya sendiri.
Dipelajari di Modul 03 · Fungsi, closure, dan `this`
fungsi panahjuga: arrow function
Cara ringkas menulis fungsi: parameter di kiri
=>, hasil di kanan. Badan satu ekspresi dikembalikan tanpareturn. Fungsi panah tidak punyathissendiri; ia memakaithisdari cakupan tempat ia ditulis.Contoh:
const kaliDua = (x) => x * 2;Dipelajari di Modul 03 · Fungsi, closure, dan `this`
fungsi pembandingjuga: comparator
Fungsi
(a, b) => …untuksortdantoSortedyang mengembalikan angka negatif bilaadi depan, positif bilabdi depan, dan nol bila setara. Tanpanya,sortmengurutkan sebagai teks.Contoh:
harga.toSorted((a, b) => a - b).Dipelajari di Modul 02 · JavaScript dari kacamata Python
fungsi tingkat tinggijuga: higher-order function
Fungsi yang menerima fungsi lain sebagai argumen atau mengembalikan fungsi.
map,filter, danreduceadalah contohnya.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
genericjuga: parameter tipe, generik
Fungsi atau tipe yang menerima parameter tipe, misalnya
<T>, sehingga satu definisi bekerja untuk banyak tipe tanpa kehilangan informasi tipe.T extends …membatasinya. Parameter tipe dihapus saat kompilasi.Contoh:
pertama([3500, 3200])bertipenumber | undefined,pertama(["tunai"])bertipestring | undefined.Dipelajari di Modul 05 · Objek, array, dan generic
hak akses minimumjuga: least privilege
Prinsip Saltzer dan Schroeder (1975): setiap bagian sistem hanya mendapat akses yang ia butuhkan.
Contoh: peramban hanya menerima ringkasan produk, bukan harga beli; token deploy cukup berizin Workers Scripts: Edit.
Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
hidrasijuga: hydration, hydration mismatch
Langkah ketika React di peramban mencocokkan pohon Client Component dengan HTML dari server lalu memasang event handler. Bila hasil render server dan peramban berbeda, terjadi hydration mismatch.
Contoh: tabel sudah terlihat dari HTML, tetapi klik judul baru bekerja sesudah hidrasi.
Dipelajari di Modul 14 · Next.js App Router
hoistingjuga: temporal dead zone, TDZ
Deklarasi sebuah cakupan diproses sebelum baris pertamanya dijalankan.
functionlangsung siap dipanggil,varbernilaiundefined, sedangkanletdanconstberada di temporal dead zone dan galat bila disentuh sebelum barisnya.Contoh: memakai
omzetsebelumconst omzet = …menghasilkanReferenceError: Cannot access 'omzet' before initialization.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
hookjuga: rules of hooks
Fungsi React berawalan
use(useState,useEffect,useRef) yang menyimpan keadaan atau efek di luar fungsi komponen. React mengenalinya dari urutan panggilan, jadi hook dipanggil di tingkat teratas komponen, tidak di dalamifatau perulangan.Contoh:
useStatedi dalamifmemicuRendered more hooks than during the previous render.Dipelajari di Modul 13 · React dasar
HTTPjuga: Hypertext Transfer Protocol
Bahasa percakapan klien dan server di web: satu permintaan (metode, alamat, kepala, badan) dijawab satu respons (kode status, kepala, badan). Artinya ditetapkan RFC 9110.
Contoh:
GET /laporandijawab200 OKdengan badan HTML.Dipelajari di Modul 01 · Cara kerja web
idempotenjuga: idempotent
Sifat permintaan yang efeknya sama walau dikirim berkali-kali.
GET,PUT, danDELETEidempoten;POSTtidak.Contoh: menghapus transaksi 7 dua kali tetap berakhir dengan transaksi 7 terhapus.
Dipelajari di Modul 01 · Cara kerja web
IEEE 754juga: double, titik mengambang
Standar bilangan titik mengambang 64 bit (1 bit tanda, 11 bit eksponen, 52 bit mantisa) yang dipakai semua
numberJavaScript danfloatPython. Presisinya 53 bit, jadi0.1 + 0.2tidak tepat0.3.Dipelajari di Modul 02 · JavaScript dari kacamata Python
impor melingkarjuga: circular import, siklus impor
Dua modul atau lebih yang saling mengimpor.
tsctidak menangkapnya; saat dijalankan, salah satu modul bisa membaca nama yang belum diisi (ReferenceError). Dicegah dengan menyusun modul berlapis.Contoh:
harga.tsmengimporpajak.ts, danpajak.tsmengimporharga.ts.Dipelajari di Modul 07 · Kelas, modul, dan galat
import typeImpor yang hanya berisi tipe dan dihapus seluruhnya saat kompilasi. Wajib bila Node menjalankan TypeScript langsung; opsi
verbatimModuleSyntaxmemaksanya.Contoh:
import type { Laporan } from "./jenis.ts";.Dipelajari di Modul 07 · Kelas, modul, dan galat
index signaturejuga: signatur indeks
Bentuk objek yang kuncinya belum diketahui, ditulis
{ [kunci: string]: number }(sama denganRecord<string, number>). Membaca kunci yang tidak ada diketik sebagainumber, padahal nilainyaundefined, kecualinoUncheckedIndexedAccessdinyalakan.Contoh:
stokPerSatuan["tabung"]bertipenumbertetapi bernilaiundefined.Dipelajari di Modul 05 · Objek, array, dan generic
inferensi tipejuga: inferensi, infer
Kemampuan TypeScript menyimpulkan tipe dari nilai awal, dari
return, dan dari konteks, sehingga variabel lokal tidak perlu dianotasi.constmenyimpulkan literal,letmemperlebar ke tipe umum.Contoh:
const daftar = [3500, 2000]bertipenumber[].Dipelajari di Modul 04 · Tipe di TypeScript
injeksi ketergantunganjuga: dependency injection
Kode menerima ketergantungannya (jaringan, jam, penyimpanan) sebagai parameter, bukan memanggil yang global langsung, sehingga tes bisa memberi pengganti.
Contoh:
ringkasHariIni(ambil, hariIni)menerimafetchdi produksi dan spy di tes.Dipelajari di Modul 11 · Pengujian
innerHTMLProperti elemen DOM berisi HTML di dalamnya. Mengisinya membuat teks diurai sebagai HTML, jadi data yang dimasukkan lewat sini bisa menjadi elemen atau skrip.
Contoh:
td.innerHTML = "<Promo>"membuat elemen kosongpromo.Dipelajari di Modul 01 · Cara kerja web
instanceofOperator yang menelusuri rantai prototipe objek dan menjawab
truebila bertemuKelas.prototype. Objek yang dilewatkan lewat JSON kehilangan rantainya.Contoh:
g instanceof ErrorbernilaitrueuntukGalatLaporan; salinanJSON.parse(JSON.stringify(g))tidak.Dipelajari di Modul 07 · Kelas, modul, dan galat
integritasjuga: Subresource Integrity, SRI
Hash isi berkas paket di lockfile, ditulis
sha512-lalu Base64. Menjamin berkas yang dipasang sama persis dengan saat lockfile ditulis, bukan bahwa isinya baik.Contoh:
npm cimenolak tarball yang berubah satu huruf dengan galatEINTEGRITY.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
interfacejuga: type aliasCara memberi nama pada bentuk objek;
type Nama = …(type alias) memberi nama pada tipe apa pun, termasuk union. Keduanya hilang saat kode dijalankan.Contoh:
interface Produk { id: number; nama: string; diskon?: number }.Dipelajari di Modul 04 · Tipe di TypeScript
intersectionjuga: tipe irisan
Tipe
A & B: nilai yang memenuhi A dan B sekaligus. Untuk objek, medannya bertambah; medan yang bertentangan menjadinever, dan galatnya baru muncul saat objek dibuat.Contoh:
{ kode: number } & { kode: string }membuatkodebertipenever.Dipelajari di Modul 05 · Objek, array, dan generic
jalur medanjuga: path
Kunci dan indeks dari akar sampai medan yang salah, dipisah titik, dalam pesan galat pengurai. Zod menyimpannya di
issue.path.Contoh:
transaksi.5.metodeBayardilaporan-rusak.json.Dipelajari di Modul 12 · Data di batas sistem
jam palsujuga: fake timers, useFakeTimers
Pengganti
setTimeout,clearTimeout, danDate.nowyang hanya maju saat tes memerintahkan: antrean timer terurut menurut waktu jatuh tempo ditambah satu angka "sekarang".Contoh: tes debounce mensimulasikan 700 milidetik dalam hitungan mikrodetik.
Dipelajari di Modul 11 · Pengujian
jeda berlipatjuga: exponential backoff, jitter
Cara mencoba ulang pekerjaan yang gagal dengan jeda yang berlipat dua setiap kali, sering ditambah jitter (jeda acak) agar banyak klien tidak mencoba bersamaan. Hanya untuk operasi yang aman diulang.
Contoh:
jedaAwalMs100 memberi jeda 100, 200, 400 ms.Dipelajari di Modul 09 · Asinkron
jsdom
Implementasi DOM dan HTML untuk Node, dipakai pemeriksa latihan
lingkungan=dom. Struktur, event, dan formulirnya mengikuti standar, tetapi tidak menggambar, tidak memuat gambar, dan tidak menjalankan skrip halaman.Contoh: contoh
innerHTMLdenganonerroraman dijalankan di jsdom.Dipelajari di Modul 10 · DOM, event, dan formulir
JSONjuga: JSON.parse, JSON.stringify
Format data teks (RFC 8259) yang hanya mengenal objek, array, string, angka, boolean, dan
null. Tanggal menjadi string,undefinedhilang,NaNmenjadinull, dan kunci ganda: yang terakhir menang.Contoh:
JSON.stringify({ t: new Date(0) })menghasilkan string, bukanDate.Dipelajari di Modul 12 · Data di batas sistem
JSON Pointerjuga: RFC 6901
Penunjuk ke satu nilai di dalam dokumen JSON, ditulis dengan garis miring;
~menjadi~0dan/menjadi~1.Contoh:
#/transaksi/5/metodeBayar.Dipelajari di Modul 12 · Data di batas sistem
JSXjuga: TSX
Sintaks mirip HTML di berkas
.tsxyang dikompilasi menjadi panggilan fungsijsx(jenis, props). Bukan HTML dan bukan string;{…}di dalamnya menyisipkan ekspresi JavaScript.Contoh:
<Kartu judul="Omzet" />menjadi_jsx(Kartu, { judul: "Omzet" }).Dipelajari di Modul 13 · React dasar
kaskadejuga: cascade, spesifisitas
Aturan CSS untuk memilih pemenang bila dua aturan bertentangan: asal gaya, lalu spesifisitas (
idmengalahkanclass,classmengalahkan nama elemen), lalu urutan penulisan.Contoh:
#total { color: red }menang atas.angka { color: blue }walau ditulis lebih dulu.Dipelajari di Modul 01 · Cara kerja web
kelaparanjuga: starvation
Keadaan saat mikrotugas terus menjadwalkan mikrotugas lain sehingga tugas berikutnya tidak pernah mendapat giliran: timer tidak jalan, klik tidak diproses, dan halaman tidak digambar.
Contoh:
queueMicrotaskyang memanggil dirinya sendiri tanpa batas membekukan halaman.Dipelajari di Modul 09 · Asinkron
kelasjuga: class, konstruktor, constructor
Cetakan objek berisi medan, konstruktor (dijalankan
new), metode, getter, dan anggotastatic. Di bawahnya, kelas adalah fungsi pembuat dan metodenya disimpan sekali di prototipe.Contoh:
class Keranjangdengantambah(produkId, jumlah)dan gettertotalItem.Dipelajari di Modul 07 · Kelas, modul, dan galat
kepala HTTPjuga: header
Pasangan
nama: nilaiyang membawa keterangan tambahan di permintaan atau respons, misalnya jenis badan. Nama kepala tidak peka huruf besar.Contoh:
Content-Type: text/html; charset=utf-8.Dipelajari di Modul 01 · Cara kerja web
kesamaan ketatjuga: strict equality, kesamaan longgar
Perbandingan
===yang tidak mengonversi apa pun: beda tipe berarti beda. Kesamaan longgar==mengonversi dulu dan tidak transitif, jadi course ini selalu memakai===dan!==.Contoh:
0 == ""bernilaitrue, tetapi0 === ""bernilaifalse.Dipelajari di Modul 02 · JavaScript dari kacamata Python
kesulitan esensialjuga: kesulitan aksidental
Pembedaan Brooks ("No Silver Bullet", 1986): kesulitan esensial adalah memutuskan apa yang dibangun dan merumuskannya dengan tepat; kesulitan aksidental adalah mengetik, menyusun, dan alat.
Contoh: AI cepat menulis kerangka komponen, tetapi memutuskan rentang inklusif tetap pekerjaanmu.
Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
ketidaktepatan tipejuga: unsoundness, unsound
Sifat sistem tipe yang tidak menjamin nilai saat berjalan cocok dengan tipenya. TypeScript sengaja begitu di titik
as,any, dan data dari luar, demi kemudahan memakai JavaScript yang ada.Contoh:
terjualMiGorengbertipenumbertetapi berisi string"02-1".Dipelajari di Modul 12 · Data di batas sistem
keyProp khusus yang memberi tanda pengenal stabil kepada setiap elemen dalam daftar, agar React tahu elemen baru mana yang sama dengan elemen lama. Bukan prop biasa; tidak diteruskan ke komponen.
Contoh:
<li key={p.produkId}>; dengankeyindeks, isi kotak catatan menempel pada baris yang salah saat daftar diurutkan ulang.Dipelajari di Modul 13 · React dasar
keyofOperator tipe yang menghasilkan union nama-nama medan sebuah tipe.
Contoh:
keyof Kasiradalah"id" | "nama" | "aktif".Dipelajari di Modul 05 · Objek, array, dan generic
klien bertipejuga: typed client
Fungsi pengambil data yang tipenya diturunkan dari kontrak, sehingga jalur yang tidak ada atau query yang kurang ditolak
tscsebelum permintaan dikirim. Saat jalan, ia tetap tidak memeriksa bentuk jawaban.Contoh:
ambil("/api/ringkasan", { mulai: "2026-09-01" })ditolak karenaselesaihilang.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
kode keluarjuga: exit code, exitCode
Angka yang diberikan program saat selesai: 0 berhasil, selain itu gagal. CLI
laporanmemakai 1 untuk galat data dan 2 untuk galat pemakaian, ditetapkan lewatprocess.exitCode, bukanprocess.exit().Contoh:
echo $?mencetak 1 sesudahlaporan ringkas data/laporan-rusak.json.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
kode statusjuga: status code
Angka tiga digit di respons HTTP. Digit pertama menentukan kelasnya: 2xx berhasil, 3xx pengalihan, 4xx klien salah, 5xx server gagal.
Contoh:
404berarti sumbernya tidak ditemukan;503berarti server sementara tidak sanggup.Dipelajari di Modul 01 · Cara kerja web
kombinator Promisejuga: Promise.all, Promise.allSettled, Promise.race, Promise.any
Empat fungsi yang menunggu banyak Promise sekaligus:
all(semua wajib, gagal cepat),allSettled(semua tuntas, tidak pernah ditolak),race(yang pertama tuntas), danany(yang pertama dipenuhi). Urutan hasil mengikuti masukan.Contoh:
Promise.allSettledmenampilkan daftar produk walau ringkasan gagal dimuat.Dipelajari di Modul 09 · Asinkron
komponen terkendalijuga: input terkendali, controlled component, input tak terkendali
Komponen atau kotak isian yang nilainya ditentukan induk atau state (
value+onChange), bukan disimpan sendiri. Kotak tak terkendali memakaidefaultValuedan dibaca saat formulir dikirim.Contoh:
<input value={kata} onChange={(e) => setKata(e.target.value)} />.Dipelajari di Modul 13 · React dasar
komposisijuga: composition
Objek yang memiliki objek lain dan meneruskan pekerjaan kepadanya, alih-alih menjadi turunannya. Disambung saat program berjalan, jadi pembungkus bisa ditumpuk dalam urutan apa pun.
Contoh:
new PencatatBerawalan(new PencatatMemori(), "[warung]").Dipelajari di Modul 07 · Kelas, modul, dan galat
kondisi balapanjuga: race condition
Bug ketika hasil bergantung pada urutan selesainya pekerjaan asinkron, sehingga jawaban yang datang belakangan menimpa yang lebih baru.
Contoh: omzet 1 September yang tiba sesudah omzet 2 September menimpa layar, kecuali permintaan lama dibatalkan.
Dipelajari di Modul 13 · React dasar
literal typejuga: tipe literal
Tipe yang hanya berisi satu nilai, seperti
"tunai"atau404. Digabung dengan union, ia menyatakan himpunan nilai sah dengan tepat.Contoh:
type MetodeBayar = "tunai" | "qris" | "transfer".Dipelajari di Modul 04 · Tipe di TypeScript
live binding
Nama yang diimpor adalah sambungan baca saja ke "kotak" milik modul pengekspor, bukan salinan nilai. Perubahan di modul pemilik terlihat oleh pengimpor, tetapi pengimpor tidak boleh mengisinya (TS2632).
Contoh:
jumlahDimuatdaripenghitung.tsmenjadi 2 sesudahcatatDimuat().Dipelajari di Modul 07 · Kelas, modul, dan galat
lockfilejuga: package-lock.json
Berkas yang mencatat versi persis, alamat unduhan, dan integritas setiap paket di pohon dependensi, agar semua orang dan CI memasang hal yang sama. Selalu di-commit dan ditinjau.
Contoh: entri
node_modules/typescriptberisi"version": "7.0.2"dan hashsha512-….Dipelajari di Modul 08 · Node, npm, dan rantai pasok
Mapjuga: SetKamus bawaan JavaScript: kunci tipe apa pun, urutan iterasi sesuai urutan penyisipan, tanpa properti warisan.
Setadalah himpunan nilai unik dengan aturan kesamaan yang sama.Contoh:
new Map([[1, "Rina"], [2, "Joko"]]).get(2)adalah"Joko".Dipelajari di Modul 03 · Fungsi, closure, dan `this`
mapped typejuga: tipe terpetakan
Tipe yang dibuat dengan menelusuri setiap kunci tipe lain,
{ [K in keyof T]: … }. Bisa menambah atau membuangreadonlydan?, dan mengganti nama kunci denganas.Contoh:
type Draf<T> = { -readonly [K in keyof T]?: T[K] }.Dipelajari di Modul 06 · Desain dengan tipe
mass assignment
Celah saat server menyalin seluruh badan permintaan ke data tersimpan, sehingga klien bisa mengisi medan milik server.
Contoh:
{ id: 17, disetujui: false, ...badan }membuat klien menyetujui kasbonnya sendiri.Dipelajari di Modul 12 · Data di batas sistem
medan privatjuga: #privat, private
Medan berawalan
#yang benar-benar tidak bisa dibaca dari luar kelas, bahkan saat runtime. Kata kunciprivatemilik TypeScript hanya berlaku saat kompilasi dan tetap terlihat diObject.keysdanJSON.stringify.Contoh:
#isi = new Map<number, number>()menjaga aturan "jumlah tidak pernah negatif" diKeranjang.Dipelajari di Modul 07 · Kelas, modul, dan galat
mengangkat statejuga: lifting state up, aliran data satu arah
Memindahkan state ke induk terdekat yang membungkus semua komponen yang membutuhkannya. Data turun lewat props, permintaan perubahan naik lewat fungsi yang juga diberikan sebagai props.
Contoh: pilihan metode bayar disimpan di
DasborMini, lalu dibacaFilterMetode, kartu, dan tabel.Dipelajari di Modul 13 · React dasar
mesin keadaanjuga: state machine, reducer
Model keadaan yang hanya mengizinkan keadaan bermakna dan perpindahan yang sah lewat peristiwa. Fungsi
transisi(keadaan, peristiwa)yang mengembalikan keadaan baru tanpa mengubah apa pun disebut reducer.Contoh:
KeadaanMuatdiam → memuat → berhasil atau gagal, denganulangpaling banyak tiga percobaan.Dipelajari di Modul 06 · Desain dengan tipe
mikrotugasjuga: microtask, antrean mikrotugas, queueMicrotask
Pekerjaan kecil yang dijalankan segera setelah tugas yang sedang berjalan selesai, sebelum tugas berikutnya: reaksi Promise (
then,catch,finally), lanjutan sesudahawait, danqueueMicrotask. Antreannya dikosongkan sampai habis.Contoh:
Promise.resolve().then(() => log.push("c"))mencatatcsebelum timer 0 ms.Dipelajari di Modul 09 · Asinkron
modul ESjuga: ES module, ESM
Berkas dengan cakupan sendiri yang membagikan nama lewat
exportdan mengambil nama lewatimport, dengan ekstensi.tsditulis lengkap. Dimuat dalam tiga fase (konstruksi, penautan, evaluasi) dan setiap modul dievaluasi sekali.Contoh:
import { formatRupiah } from "./format.ts";.Dipelajari di Modul 07 · Kelas, modul, dan galat
nama yang bisa diaksesjuga: accessible name
Teks yang dibacakan pembaca layar untuk sebuah kontrol: isi teks tombol,
<label>terkait,aria-label, atauaria-labelledby.Contoh: tombol
+denganaria-label="Tambah Beras 5 kg"dibacakan sebagai nama itu, bukan "tombol" saja.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
NaNNilai number yang berarti "bukan angka", hasil seperti
0 / 0atauNumber("abc"). Ia tidak sama dengan apa pun, termasuk dirinya, dan menular ke setiap perhitungan berikutnya. Periksa denganNumber.isNaN.Dipelajari di Modul 02 · JavaScript dari kacamata Python
narrowingjuga: mempersempit tipe, control flow analysis
Cara TypeScript mempersempit tipe sebuah variabel di setiap cabang berdasarkan pemeriksaan yang sudah dilakukan, seperti
typeof,=== null,in,instanceof, danArray.isArray.Contoh: di dalam
if (typeof x === "string"),xbertipestring.Dipelajari di Modul 04 · Tipe di TypeScript
neverjuga: pemeriksaan tuntasTipe tanpa nilai sama sekali. Di cabang
defaultsebuahswitch,const tuntas: never = mhanya diterima bila semua anggota union sudah ditangani, sehingga anggota baru yang terlupa menjadi galat kompilasi.Dipelajari di Modul 04 · Tipe di TypeScript
Next.jsjuga: App Router
Framework React yang menambahkan rute dari folder
app/, render di server, route handler, build, dan deploy. API-nya berubah antarversi, jadi dokumentasinya dibaca dari versi terpasang dinode_modules/next/dist/docs/.Contoh:
app/laporan/page.tsxmenjadi halaman/laporan.Dipelajari di Modul 14 · Next.js App Router
nilai batasjuga: analisis nilai batas, boundary value
Kasus uji tepat di tepi setiap partisi dan satu langkah di kedua sisinya, karena bug off-by-one berkumpul di sana.
Contoh: hanya kasus 5.000 gram yang menangkap
>=yang seharusnya>.Dipelajari di Modul 11 · Pengujian
Nodejuga: Node.js
Program yang menjalankan JavaScript di luar peramban: mesin V8, pustaka libuv untuk berkas, jaringan, dan pewaktu, serta modul inti berawalan
node:. Tidak punyadocumentatauwindow. Sejak 22.18 bisa menjalankan berkas.tslangsung tanpa memeriksa tipe.Contoh:
node laporan.ts ringkas laporan.jsonmenjalankan CLI proyek tanpa langkah kompilasi.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
node_modulesFolder tempat paket dipasang. Node mencarinya mulai dari folder berkas yang mengimpor, lalu naik satu tingkat demi satu tingkat sampai akar.
Contoh: untuk berkas di
/kerja/laporan-warung/cli, yang pertama diperiksa adalah/kerja/laporan-warung/cli/node_modules.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
NodeListKumpulan simpul hasil
querySelectorAll. Bisa di-for … ofdan punyaforEach, tetapi bukan array: tidak punyamapataufilter. Ubah dengan[...daftar]atauArray.from.Contoh:
[...document.querySelectorAll("li")].map((li) => li.textContent).Dipelajari di Modul 10 · DOM, event, dan formulir
noUncheckedIndexedAccessOpsi
tsc(di luarstrict) yang membuat pembacaan indeks array dan index signature bertipeT | undefined, sehingga kamu dipaksa memeriksa sebelum memakai nilainya.Contoh: dengan opsi ini,
kasir[3].toUpperCase()ditolak sebelum dijalankan.Dipelajari di Modul 05 · Objek, array, dan generic
npm auditPerintah yang mencocokkan versi di lockfile dengan basis data peringatan keamanan dan keluar dengan kode 1 bila ada temuan. Hanya tahu masalah yang sudah dilaporkan.
Contoh:
semver7.5.1 dilaporkan rentan ReDoS (GHSA-c2qf-rxjj-qqgw).Dipelajari di Modul 08 · Node, npm, dan rantai pasok
npm ciPerintah yang memasang ulang persis isi lockfile: berhenti dengan galat bila lockfile tidak cocok dengan
package.json, menghapusnode_moduleslama, dan tidak pernah menulis ke keduanya. Dipakai di CI.Contoh: galat
EUSAGEsaatpackage.jsondiubah tanpa memperbarui lockfile.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
nullish coalescingjuga: operator ??
Operator
a ?? byang menggantiadenganbhanya bilaabernilainullatauundefined. Untuk nilai bawaan lebih tepat daripada||, yang juga mengganti 0 dan string kosong.Contoh:
stok ?? 10tetap 0 bila stok 0.Dipelajari di Modul 02 · JavaScript dari kacamata Python
Object.freezeFungsi JavaScript yang membekukan objek saat program berjalan: mengubah medannya melempar
TypeErrordi modul ES. Dangkal juga, sepertireadonly, tetapi bekerja walaupun tipe sudah dihapus.Contoh:
Object.freeze({ hargaJual: 5000 })menolakhargaJual = 5500bahkan lewat asersias.Dipelajari di Modul 05 · Objek, array, dan generic
OpenAPIjuga: kontrak API, kontrak dulu, contract-first, code-first
Format standar (JSON atau YAML) untuk menulis kontrak API HTTP: jalur, metode, parameter, respons, dan galat. Di versi 3.1, skemanya JSON Schema 2020-12.
Contoh:
data/laporan-api.jsonmenyatakanGET /api/ringkasanwajib diberimulaidanselesai.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
openapi-typescriptGenerator yang membaca kontrak OpenAPI dan menulis tipe TypeScript (
paths,components,operations). Hanya bentuk yang terwakili;format,pattern, danminimumhilang.Contoh:
components["schemas"]["Ringkasan"]diambil dari berkas hasilnya.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
OpenNextjuga: @opennextjs/cloudflare
Adapter yang mengubah keluaran
next buildmenjadi aplikasi yang bisa berjalan di platform selain server Node, misalnya Cloudflare Workers.Contoh:
npx opennextjs-cloudflare buildmenghasilkan.open-next/worker.jsdan folder aset.Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
optional chainingjuga: operator ?.
Penulisan
a?.byang bernilaiundefinedbilaaadalahnullatauundefined, alih-alih galat. Untuk data yang memang boleh tidak ada.Contoh:
pelanggan?.nama.Dipelajari di Modul 02 · JavaScript dari kacamata Python
Originjuga: Sec-Fetch-Site, Fetch MetadataKepala permintaan berisi asal (skema, host, port) halaman yang memulai permintaan. Penjaga CSRF membandingkannya persis dengan daftar asal yang diizinkan.
Contoh:
https://warung.example.jahat.examplelolosstartsWith("https://warung.example"), tetapi ditolak perbandingan persis.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
overrideKata kunci TypeScript yang menandai metode atau medan yang sengaja menimpa milik induk;
tscmenolaknya bila induk tidak punya anggota itu (TS4113).Contoh:
override name = "GalatLaporan";.Dipelajari di Modul 07 · Kelas, modul, dan galat
package.jsonBerkas identitas proyek Node: nama, versi, jenis modul (
type), perintah (bin,scripts), versi Node (engines), sertadependenciesdandevDependencies.Contoh:
"type": "module"membuat berkas.tsproyek dibaca sebagai modul ES.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
parameter property
Bentuk lama
constructor(public readonly nama: string) {}yang sekaligus membuat dan mengisi medan. DitolakerasableSyntaxOnly(TS1294) karenatscharus menambah kode yang tidak tertulis; tulis medannya secara eksplisit.Contoh:
readonly kode: KodeGalat;laluthis.kode = kode;di konstruktorGalatLaporan.Dipelajari di Modul 07 · Kelas, modul, dan galat
parse, don't validatejuga: pengurai bertipe
Prinsip memeriksa data di batas dengan pengurai yang menerima
unknowndan mengembalikan nilai bertipe baru berisi medan yang dikenal, atau galat dengan jalur medan, alih-alih validator yang hanya menjawabtrue/false.Contoh:
parseItem(x, "transaksi.7.item.0")membuang medandiskonRahasia.Dipelajari di Modul 12 · Data di batas sistem
partisi ekuivalenjuga: equivalence partitioning
Teknik memilih kasus uji dengan membagi masukan menjadi kelompok yang seharusnya diperlakukan sama, termasuk kelompok tidak sah, lalu mengambil satu wakil per kelompok.
Contoh: berat ongkir ≤ 0, 1–1.000, 1.001–5.000, dan > 5.000 gram.
Dipelajari di Modul 11 · Pengujian
pelari tesjuga: test runner
Program yang memuat berkas tes (fase daftar), lalu menjalankan setiap tes berurutan di dalam
try/catchdengan batas waktu dan mencatat hasilnya (fase jalan).Contoh:
jalankan.mjsmenggagalkan tes yang melebihi 5 detik tanpa menghentikan tes berikutnya.Dipelajari di Modul 11 · Pengujian
pemeriksaan medan berlebihjuga: excess property checking
Pemeriksaan tambahan
tsckhusus untuk literal objek yang baru ditulis di tempat yang meminta tipe tertentu: medan yang tidak dikenal ditolak karena hampir selalu salah ketik. Objek yang sudah disimpan di variabel tidak terkena aturan ini.Contoh:
const t: Titik = { x: 3, y: 4, z: 12 }ditolak (TS2353), tetapijarakKePusat(titik3d)lolos.Dipelajari di Modul 05 · Objek, array, dan generic
pendengar eventjuga: event listener, addEventListener, removeEventListener
Fungsi yang didaftarkan dengan
addEventListener(jenis, fungsi, opsi)dan dipanggil peramban sebagai tugas saat event terjadi. Melepasnya butuh rujukan fungsi yang sama;{ once: true }dan{ signal }melepas otomatis.Contoh: dua fungsi panah berisi sama tidak saling melepas.
Dipelajari di Modul 10 · DOM, event, dan formulir
pengganti tesjuga: test double, dummy, stub, spy, mock, fake
Objek pengganti ketergantungan dalam tes: dummy (pengisi), stub (jawaban tetap), spy (stub yang mencatat), mock (memeriksa harapan sendiri), dan fake (implementasi sederhana yang sungguh bekerja).
Contoh:
ambilyang mencatat URL lalu menjawabResponse.json({ omzet: 381800 })adalah spy.Dipelajari di Modul 11 · Pengujian
penghapusan tipejuga: type erasure, type stripping
Semua sintaks tipe dibuang sebelum kode berjalan, sehingga tipe tidak ada saat runtime. Node 22 menjalankan berkas
.tsdengan mengganti tipe dengan spasi, tanpa memeriksanya.Contoh:
const m: MetodeBayar = "qris"menjadiconst m = "qris".Dipelajari di Modul 04 · Tipe di TypeScript
pengodean persenjuga: percent-encoding, dikodekan persen
Cara menulis karakter yang tidak boleh muncul apa adanya di URL:
%lalu dua digit heksadesimal byte UTF-8-nya.URLSearchParamsmelakukannya otomatis.Contoh:
&menjadi%26,ümenjadi%C3%BC.Dipelajari di Modul 01 · Cara kerja web
pengurai HTMLjuga: tokenizer, tree construction, pemulihan galat
Bagian peramban yang mengubah teks HTML menjadi pohon DOM: tokenizer (mesin keadaan per karakter) lalu tree construction dengan aturan pemulihan galat, sehingga masukan apa pun menghasilkan suatu pohon.
innerHTMLmemanggilnya;textContenttidak.Contoh:
<table><tr>diurai menjadi<table><tbody><tr>.Dipelajari di Modul 10 · DOM, event, dan formulir
penolakan tak tertanganijuga: unhandled rejection
Promise yang ditolak tanpa
catchdan tanpaawait. Sejak Node 15, prosesnya dihentikan dengan kode keluar 1; di peramban galatnya muncul di konsol dan eventunhandledrejection.Contoh: memanggil
muatRingkasan()yang gagal tanpaawaitmenghentikan skrip denganError: server mati.Dipelajari di Modul 09 · Asinkron
pewarisanjuga: inheritance, extends, super
Kelas yang memperluas kelas lain dengan
extends: mendapat semua metodenya, boleh menambah dan menimpa. Cocok untuk hubungan "adalah" yang tahan substitusi;super(...)wajib dipanggil sebelum memakaithis.Contoh:
class GalatLaporan extends Error.Dipelajari di Modul 07 · Kelas, modul, dan galat
piramida tesjuga: tes kontrak, tes end-to-end
Susunan tes dengan banyak tes kecil yang cepat di bawah (tipe, unit) dan sedikit tes besar yang lambat di atas (komponen, end-to-end), ditambah pemeriksaan manual untuk hal yang tidak bisa dinilai mesin.
Contoh: proyek lab menjalankan 19 tes Vitest dalam 1,4 detik.
Dipelajari di Modul 16 · Proyek akhir: Dasbor Laporan Warung
pola Resultjuga: Result
Mengembalikan keberhasilan atau kegagalan sebagai nilai union
{ ok: true; … } | { ok: false; … }, bukan melempar galat.tscmemaksa pemanggil memeriksaoksebelum membaca hasilnya.Contoh:
HasilMuatdarimuatDariTeks(teks).Dipelajari di Modul 06 · Desain dengan tipe
polusi prototipejuga: prototype pollution
Celah saat penggabungan objek yang naif menulis lewat kunci
__proto__keObject.prototype, sehingga properti muncul di semua objek biasa.Contoh: objek kosong tiba-tiba punya
isAdmin: truesetelahgabungNaif.Dipelajari di Modul 12 · Data di batas sistem
predikat tipejuga: type predicate, type guard
Fungsi bertipe kembalian
x is Tyang memberi tahu TypeScript bahwaxbertipeTbila hasilnyatrue. Badannya tidak diperiksa, jadi harus ditulis teliti dan diuji.Contoh:
function isMetodeBayar(x: unknown): x is MetodeBayar.Dipelajari di Modul 04 · Tipe di TypeScript
preventDefaultjuga: aksi bawaan, defaultPreventedMetode event yang membatalkan aksi bawaan peramban (mengikuti tautan, mengirim formulir, mencentang kotak) bila event-nya
cancelable, tanpa menghentikan perjalanan event.Contoh: pendengar
submitformulir kasbon memanggilnya agar halaman tidak dimuat ulang.Dipelajari di Modul 10 · DOM, event, dan formulir
Problem Detailsjuga: RFC 9457, application/problem+json
Bentuk JSON standar galat HTTP API:
type,title,status,detail,instance, dan ekstensi sepertierrors, dikirim dengan jenis mediaapplication/problem+json.Contoh: status 422 dengan
errorsberisi{ pointer: "#/jumlah", detail: "…" }.Dipelajari di Modul 12 · Data di batas sistem
Promisejuga: pending, fulfilled, rejected, settled
Objek yang mewakili hasil yang belum ada. Keadaannya menunggu (pending), lalu tuntas (settled) paling banyak sekali: dipenuhi dengan nilai atau ditolak dengan alasan.
thenmengembalikan Promise baru, dan penolakan mengalir sampaicatch.Contoh:
resolve("pertama")laluresolve("kedua")tetap menghasilkan"pertama".Dipelajari di Modul 09 · Asinkron
properti opsionaljuga: optional property
Properti bertanda
?yang boleh tidak ada. Tipenya otomatis ditambahundefined, jadi pemakainya harus menangani kasus kosong.Contoh:
p.hargaJual - (p.diskon ?? 0).Dipelajari di Modul 04 · Tipe di TypeScript
propsjuga: prop, children
Objek masukan sebuah komponen React, hanya dibaca.
childrenadalah prop berisi apa pun di antara tag pembuka dan penutup.Contoh:
readonly data: readonly RingkasanProduk[]membuatdata.sort(...)ditolaktsc.Dipelajari di Modul 13 · React dasar
prototipejuga: rantai prototipe, prototype
Objek tempat mesin JavaScript mencari properti yang tidak ada di objek itu sendiri, naik terus sampai
null. Metode kelas tinggal diKelas.prototype, danextendsmemperpanjang rantainya.Contoh:
toStringobjekGalatLaporanditemukan diError.prototype.Dipelajari di Modul 07 · Kelas, modul, dan galat
rantai pasokjuga: supply chain, serangan rantai pasok
Semua orang, akun, server, dan alat yang menyumbang kode ke programmu, termasuk dependensi transitif dan akun pemelihara paket. Serangan biasanya membobol akun lalu memakai mekanisme normal npm.
Contoh:
debug4.4.2 (8 September 2025) diterbitkan penyerang setelah akun pemeliharanya direbut.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
rasio kontrasjuga: luminans relatif
Perbandingan
(L terang + 0,05) / (L gelap + 0,05)antara dua warna, dari 1 sampai 21, denganLluminans relatif sRGB. WCAG 2.2 AA meminta minimal 4,5:1 untuk teks biasa, tanpa pembulatan.Contoh:
#767676di atas putih 4,54 (lolos);#7777774,48 (gagal).Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
ReadableStreamjuga: streaming, res.bodyAliran data standar WHATWG Streams yang bisa dibaca potong demi potong dengan
for await … ofselagi data masih datang. BadanResponseadalahReadableStream.Contoh: ekspor CSV ribuan baris ditampilkan sambil mengalir, tanpa menunggu utuh.
Dipelajari di Modul 09 · Asinkron
readonlyjuga: Readonly<T>, ReadonlyArrayPenanda TypeScript yang melarang medan atau array diubah sesudah dibuat. Hanya diperiksa
tsc, hilang saat program berjalan, dan dangkal: isi objek di dalam medan itu tetap bisa diubah.Readonly<T>menambahkannya ke semua medan tingkat pertama.Contoh:
readonly item: readonly ItemTransaksi[]di kontrakTransaksimenolakt.item.push(…).Dipelajari di Modul 05 · Objek, array, dan generic
Recordjuga: Record<K, V>Tipe utilitas untuk objek berkunci
KbernilaiV. BilaKunion literal, setiap kunci wajib ada, jadi tabel tidak bisa diam-diam kehilangan satu baris.Contoh:
Record<MetodeBayar, number>wajib punya kuncitunai,qris, dantransfer.Dipelajari di Modul 05 · Objek, array, dan generic
reduceMetode array yang melipat semua elemen menjadi satu nilai dengan
f(akumulator, elemen), mulai dari nilai awal. Tanpa nilai awal, array kosong menjadi galat.Contoh:
item.reduce((s, it) => s + it.jumlah * it.hargaSatuan, 0).Dipelajari di Modul 03 · Fungsi, closure, dan `this`
rekonsiliasijuga: reconciliation, fiber, fase render, fase commit
Cara React mengubah DOM: fase render (murni) menghasilkan pohon elemen baru, lalu fase commit menerapkan perbedaannya ke DOM. Jenis berbeda berarti pohon dibangun ulang; anak daftar dicocokkan lewat
keydalam satu lintasan.Contoh:
bcda → abcdmembuat React memindahb,c, dand, bukan hanyaa.Dipelajari di Modul 13 · React dasar
Responsejuga: Request, HeadersKelas dari spesifikasi WHATWG Fetch untuk respons HTTP;
RequestdanHeaderspasangannya. Node dan peramban memakai kelas yang sama, begitu pula kode server modern.Contoh:
new Response("Tidak ditemukan", { status: 404 }).Dipelajari di Modul 01 · Cara kerja web
route handlerjuga: route.ts
Berkas
route.tsdiapp/yang mengekspor fungsi bernama metode HTTP. Fungsinya menerimaRequestdan mengembalikanResponsestandar, jadi bisa diuji sebagai fungsi biasa di Node.Contoh:
GET(new Request("http://localhost/api/ringkasan?mulai=2026-09-01&selesai=2026-09-30")).Dipelajari di Modul 14 · Next.js App Router
RSC Payloadjuga: React Server Component Payload
Deskripsi pohon UI dalam teks ringkas yang dikirim server bersama HTML: elemen hasil Server Component, rujukan Client Component, dan props yang diserialisasi.
Contoh: baris
10:I[27423,[…],"TabelProduk"]adalah rujukan Client Component.Dipelajari di Modul 14 · Next.js App Router
rujukan karakterjuga: character reference
Penulisan karakter HTML dengan
&nama;atau&#nomor;yang tampil sebagai karakter itu tetapi tidak diurai sebagai markup.Contoh:
<tampil sebagai<.Dipelajari di Modul 01 · Cara kerja web
run-to-completionjuga: satu utas
Model eksekusi JavaScript: setiap potongan kode berjalan sampai selesai tanpa disela potongan lain. Kode lain hanya bisa berjalan di antara dua potongan, misalnya di titik
await, tidak pernah di tengahnya.Contoh: perulangan 50 juta kali menunda timer 0 ms sampai perulangan selesai.
Dipelajari di Modul 09 · Asinkron
salinan dangkaljuga: shallow copy, structuredClone
Salinan yang hanya menyalin tingkat teratas; objek atau array di dalamnya tetap dipakai bersama.
structuredClonemembuat salinan dalam.Contoh:
{ ...produk }masih berbagi arraylabeldenganproduk.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
SameSitejuga: HttpOnly, Secure, __Host-Atribut cookie yang mengatur pengiriman pada permintaan lintas situs:
Laxhanya untuk navigasi tingkat atas dengan metode aman,Stricttidak sama sekali,Noneselalu (wajibSecure).Contoh:
sesi=abc; Path=/; HttpOnly; Secure; SameSite=Lax.Dipelajari di Modul 15 · API bertipe, keamanan, dan aksesibilitas
satisfiesOperator yang memeriksa sebuah nilai terhadap tipe, tetapi membiarkan tipe nilainya tetap setepat aslinya. Beda dengan anotasi, yang melebarkan, dan dengan
as, yang tidak memeriksa kelengkapan.Contoh: tabel label
as const satisfies Record<MetodeBayar, string>menolak metode yang terlupa dan tetap tahu labelnya"QRIS".Dipelajari di Modul 06 · Desain dengan tipe
searchParamsProp halaman Next.js berisi query string URL. Di Next.js 16 berupa
Promise, dan nilai setiap kunci bisastring,string[], atauundefined, jadi selalu divalidasi.Contoh:
const { mulai } = await searchParams;.Dipelajari di Modul 14 · Next.js App Router
segmen dinamisjuga: catch-all, route group, folder privat
Folder bernama
[nama]diapp/yang cocok dengan satu segmen URL apa pun;[...nama]cocok dengan satu segmen atau lebih. Segmen statis menang atas dinamis, dan dinamis atas catch-all.Contoh:
app/laporan/[tanggal]/page.tsxmenangani/laporan/2026-09-27, tetapi tidak/laporan/hari-inibila folderhari-iniada.Dipelajari di Modul 14 · Next.js App Router
selektor CSSjuga: querySelector, querySelectorAll
Pola yang memilih elemen, sama dengan yang dipakai CSS.
querySelectormengembalikan elemen pertama yang cocok ataunull;querySelectorAllmengembalikanNodeListstatis.Contoh:
document.querySelectorAll("#daftar-produk li")memilih tiga butir produk.Dipelajari di Modul 10 · DOM, event, dan formulir
semverjuga: versi semantik, Semantic Versioning
Aturan arti nomor versi
MAJOR.MINOR.PATCH: MAJOR untuk perubahan tidak kompatibel, MINOR untuk fitur kompatibel, PATCH untuk perbaikan. Rentang^mengizinkan minor dan patch (untuk versi 0.x lebih sempit),~hanya patch. Janji pemelihara, bukan jaminan mesin.Contoh:
^0.4.2berarti>=0.4.2 <0.5.0.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
Server Componentjuga: React Server Component
Komponen bawaan Next.js: dijalankan hanya di server, boleh
async, boleh membaca data atau rahasia langsung, dan kodenya tidak pernah dikirim ke peramban, hanya hasil render-nya.Contoh: halaman
/laporanmemanggilhitungRingkasanlangsung, tanpauseEffect.Dipelajari di Modul 14 · Next.js App Router
server-onlyPaket penanda yang membuat build gagal bila modul yang mengimpornya terbawa ke Client Component, sehingga data dan rahasia server tidak ikut dibundel ke peramban.
Contoh:
lib/data.tsdiawaliimport "server-only";karena memuat harga beli.Dipelajari di Modul 14 · Next.js App Router
skrip siklus hidupjuga: skrip instal, postinstall, preinstall, lifecycle script
Perintah di
package.jsonpaket yang dijalankan npm saat paket dipasang, dengan hak penuh akunmu. Pintu masuk utama serangan rantai pasok; diblokir bawaan sejak npm 12.Contoh: paket percobaan
pembantu-tanggalmenulisJEJAK.txtlewatpostinstalltanpa menampilkan apa pun.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
spreadjuga: rest parameter, sintaks spread
Tiga titik
.... Di parameter (rest) ia mengumpulkan sisa argumen menjadi array, seperti*args; di pemanggilan, array, atau objek (spread) ia membongkar isinya.Contoh:
total(...harga),[...xs, 500],{ ...produk, harga: 4500 }.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
stdoutjuga: stderr, aliran keluaran
Dua aliran keluaran program baris perintah: stdout untuk hasil yang bisa dialirkan ke berkas atau program lain, stderr untuk galat dan pesan pemakaian yang tetap tampil walau stdout dialihkan.
Contoh:
laporan ringkas data.json > rekap.txthanya memindahkan stdout ke berkas.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
stopPropagationjuga: stopImmediatePropagationMetode event yang menghentikan perjalanan ke simpul berikutnya di jalur, tanpa membatalkan aksi bawaan peramban. Pendengar lain di simpul yang sama tetap berjalan, kecuali dengan
stopImmediatePropagation.Contoh: dipanggil di capture
div#tengah, tombol dan bubblediv#luartidak menerima event.Dipelajari di Modul 10 · DOM, event, dan formulir
strictjuga: strictNullChecks, noImplicitAny
Pengaturan
tsconfig.jsonyang menyalakan sekelompok pemeriksaan, antara lainnoImplicitAnydanstrictNullChecks. Menyala secara bawaan sejak TypeScript 6.0. Akses indeks array tetap tidak diperiksa tanpanoUncheckedIndexedAccess.Dipelajari di Modul 04 · Tipe di TypeScript
structural typingjuga: tipe struktural
Aturan bahwa objek cocok dengan sebuah tipe bila bentuknya cocok, apa pun nama deklarasi atau asalnya. Kebalikan dari tipe nominal yang membandingkan nama.
Dipelajari di Modul 04 · Tipe di TypeScript
subtipejuga: assignability, subtipe lebar, subtipe kedalaman
Hubungan "boleh ditempatkan": tipe A subtipe B bila setiap nilai A boleh dipakai di tempat yang meminta B. Untuk objek, medan tambahan boleh (lebar) dan tipe medan boleh lebih sempit (kedalaman).
Contoh:
{ metode: "tunai"; jumlah: number }boleh dipakai sebagai{ metode: string }.Dipelajari di Modul 05 · Objek, array, dan generic
tata letakjuga: layout, reflow, layout thrashing
Tahap render yang menghitung ukuran dan posisi setiap kotak, sesudah gaya dan sebelum lukis dan susun. Peramban menundanya sampai waktunya menggambar; membaca ukuran setelah menulis memaksanya dihitung seketika.
Contoh: menulis
style.heightlalu membacaoffsetHeightdi setiap putaran menghitung tata letak 816 kali.Dipelajari di Modul 10 · DOM, event, dan formulir
TDDjuga: Test-Driven Development, merah hijau refaktor
Siklus pengembangan Kent Beck: tulis satu tes kecil dan pastikan merah, tulis kode paling sederhana sampai hijau, lalu refaktor tanpa mengubah perilaku.
Contoh: tes
labelTransaksi(0)yang merah memaksa kasus "belum ada transaksi".Dipelajari di Modul 11 · Pengujian
template literaljuga: template string
String berpetik terbalik yang boleh memuat
${ekspresi}dan baris baru, padanan f-string Python.Contoh:
`Total: Rp${harga * 3}`.Dipelajari di Modul 01 · Cara kerja web
template literal type
Kembaran template string di dunia tipe. Union di dalamnya dikalikan, jadi cocok untuk himpunan teks kecil yang bisa didaftar, bukan untuk memvalidasi data dari luar.
Contoh:
`/api/${"produk" | "ringkasan" | "transaksi"}`berisi tiga jalur API.Dipelajari di Modul 06 · Desain dengan tipe
tes flakyjuga: flaky
Tes yang kadang lulus kadang gagal tanpa kode berubah, biasanya karena bergantung pada urutan tes, keadaan bersama, jam sekarang, atau waktu tunggu. Lebih buruk daripada tidak ada tes, karena orang belajar mengabaikannya.
Contoh:
tesByang hanya lulus bila dijalankan sebelumtesAkarena keduanya memakaikeranjang.Dipelajari di Modul 11 · Pengujian
tes propertijuga: property-based testing, contoh penyangkal, penyusutan, shrinking
Tes yang memeriksa sifat untuk semua masukan dengan ratusan masukan acak berbenih tetap, lalu menyusutkan contoh penyangkal yang ditemukan menjadi yang terkecil.
Contoh:
baca(formatRupiahSalah(n)) === ngagal pada-89185, yang disusutkan menjadi-1.Dipelajari di Modul 11 · Pengujian
tes tipejuga: type test
Tes yang meminta
tscmenilai tipe:// @ts-expect-errordi atas baris yang harus ditolak, dancekTipe<Sama<A, B>>()untuk kesamaan persis. Gagal bila tipe menjadi terlalu longgar.Contoh:
// @ts-expect-error angka polos bukan Rupiahdi atasconst salah: Rupiah = 5000;.Dipelajari di Modul 06 · Desain dengan tipe
tes unitjuga: unit test, Arrange–Act–Assert
Tes yang memeriksa satu perilaku dalam tiga langkah: susun masukan, jalankan kode sekali, periksa hasilnya. Pemeriksaan yang gagal melempar galat dengan pesan "didapat …, seharusnya …".
Contoh:
harapSama(formatRupiah(-5000), "-Rp5.000", "formatRupiah(-5000)").Dipelajari di Modul 11 · Pengujian
textContentProperti elemen DOM berisi teksnya. Mengisinya selalu menghasilkan simpul teks, apa pun isinya, sehingga aman untuk data.
Contoh:
td.textContent = "<Promo>"menampilkan tulisan<Promo>, bukan elemen.Dipelajari di Modul 01 · Cara kerja web
thisNilai khusus di dalam fungsi biasa yang ditentukan saat fungsi dipanggil: objek di kiri titik pada
obj.f(),undefinedpadaf()biasa, atau yang ditetapkancall,apply, danbind.Contoh:
const lepas = kasir.sapa; lepas()kehilangankasir.Dipelajari di Modul 03 · Fungsi, closure, dan `this`
tipe akses berindeksjuga: indexed access type
Tipe
T[K]: tipe medanKdi tipeT. Dipakai bersamakeyofdan generic untuk fungsi yang tipe hasilnya mengikuti nama medan.Contoh:
Kasir["nama"]adalahstring, jadikolom(kasir, "nama")bertipestring[].Dipelajari di Modul 05 · Objek, array, dan generic
tipe bermerekjuga: branded type, merek
Tipe yang ditambah medan khayalan agar tidak tertukar dengan tipe dasarnya, meniru tipe nominal tanpa biaya runtime. Hanya satu fungsi pembuat yang boleh memakai
assetelah memeriksa nilai.Contoh:
type Rupiah = number & { readonly __merek: "Rupiah" }denganrupiah(n)sebagai satu-satunya pintu masuk.Dipelajari di Modul 06 · Desain dengan tipe
tipe primitifjuga: primitif
Nilai dasar yang bukan objek. JavaScript punya tujuh: number, bigint, string, boolean,
null,undefined, dan symbol. Selain itu (array, objek, fungsi) adalah objek.Contoh:
typeof 1.5adalah"number",typeof 10nadalah"bigint".Dipelajari di Modul 02 · JavaScript dari kacamata Python
tipe utilitasjuga: utility type, Partial, Pick, Omit
Tipe bawaan TypeScript yang membuat tipe baru dari tipe lama:
Partial(semua opsional),Pick(pilih medan),Omit(buang medan),Readonly,Record,ReturnType,NonNullable. Satu sumber kebenaran, tanpa menyalin interface.Contoh:
Partial<Pick<Produk, "hargaJual" | "hargaBeli">>untuk formulir ubah harga.Dipelajari di Modul 05 · Objek, array, dan generic
toSortedjuga: toReversedMetode array ES2023 yang mengembalikan salinan terurut tanpa mengubah array aslinya, seperti
sorted()Python.sortbiasa mengubah array di tempat.Dipelajari di Modul 02 · JavaScript dari kacamata Python
tscjuga: pemeriksa tipe, kompiler TypeScriptKompiler TypeScript. Ia mengerjakan dua tugas terpisah: memeriksa tipe dan melaporkan galat berbentuk
error TSnnnn: …, lalu menghasilkan JavaScript dengan membuang sintaks tipe. Sejak versi 7, kompilernya program native yang ditulis dalam Go.Contoh:
tsc --noEmitmemeriksa saja tanpa menulis berkas.Dipelajari di Modul 04 · Tipe di TypeScript
tuple
Array dengan panjang dan tipe per posisi yang tetap.
Contoh:
type Pasangan = [nama: string, terjual: number].Dipelajari di Modul 04 · Tipe di TypeScript
type assertionjuga: as, non-null assertion
Penulisan
nilai as T(ataunilai!untuk "bukan null") yang menyuruh TypeScript percaya tanpa pemeriksaan saat runtime. Pada data dari luar, ini menyembunyikan bug.Contoh:
JSON.parse(teks) as Laporanditerima walau isinya salah.Dipelajari di Modul 04 · Tipe di TypeScript
TypeScriptjuga: TS
JavaScript ditambah anotasi tipe. Anotasinya diperiksa pemeriksa tipe
tscsebelum kode dijalankan, lalu dihapus sehingga yang berjalan JavaScript biasa.Contoh:
function sapa(orang: string): stringmenolaksapa(42)sebelum kode jalan.Dipelajari di Modul 01 · Cara kerja web
uji mutasijuga: mutation testing, mutan, mutan setara
Cara mengukur mutu tes: buat salinan kode yang masing-masing diberi satu bug kecil (mutan), lalu hitung berapa yang membuat tes gagal. Mutan setara berperilaku identik dengan aslinya dan tidak bisa dibunuh.
Contoh: rangkaian "kuat" membunuh 5 dari 6 mutan
formatRupiah;Math.abs(-n)adalah mutan setara.Dipelajari di Modul 11 · Pengujian
undefinedjuga: nullDua nilai "kosong" JavaScript.
undefineddiberikan bahasa sendiri (properti yang tidak ada, parameter yang tidak diisi, fungsi tanpareturn);nullbiasanya ditulis programmer dengan sengaja.Contoh: transaksi tanpa pelanggan terdaftar punya
pelangganId: null.Dipelajari di Modul 02 · JavaScript dari kacamata Python
unionjuga: union type, tipe gabungan
Tipe
A | Byang berarti "bertipe A atau B". Hanya operasi yang sah untuk semua anggotanya yang diizinkan sampai tipenya dipersempit.Contoh:
string | number | null.Dipelajari di Modul 04 · Tipe di TypeScript
unknownTipe untuk nilai yang belum diketahui: apa pun boleh masuk, tetapi hampir tidak ada yang boleh dilakukan sebelum tipenya dipersempit. Tepat untuk data dari luar dan variabel
catch.Contoh:
const data: unknown = JSON.parse(teks);lalu periksa bentuknya.Dipelajari di Modul 04 · Tipe di TypeScript
URLjuga: Uniform Resource Locator
Alamat sebuah sumber di web, terdiri dari skema, host, port, jalur, kueri, dan fragmen. Diurai dan dibangun dengan
URLdanURLSearchParams, bukan dengan memotong atau menyambung string.Contoh: di
https://warungmakmur.example/laporan?bulan=9, host-nyawarungmakmur.exampledan kuerinyabulan=9.Dipelajari di Modul 01 · Cara kerja web
URLSearchParamsObjek untuk membaca dan menyusun kueri URL. Ia mengodekan nilai dengan benar, sehingga isi ketikan pengguna tidak bisa menyelundupkan parameter baru.
Contoh:
u.searchParams.set("q", "teh&hal=99")menghasilkan?q=teh%26hal%3D99.Dipelajari di Modul 01 · Cara kerja web
useEffectjuga: pembersih efekHook untuk menyinkronkan komponen dengan sistem luar (
fetch, pewaktu, langganan). Efek berjalan sesudah DOM dipasang dan setiap kali dependensinya berubah; fungsi yang dikembalikannya adalah pembersih yang berjalan sebelum efek berikutnya dan saat komponen dilepas.Contoh: pembersih
() => pengendali.abort()membatalkan permintaan tanggal lama.Dipelajari di Modul 13 · React dasar
useReducerHook yang mengumpulkan semua cara sebuah state berubah dalam satu fungsi murni
(keadaan, aksi) => keadaanBaru, sehingga aturan perubahannya bisa diuji tanpa React.Contoh:
kirim({ jenis: "tambah", id: 12 })menaikkan jumlah produk 12 di keranjang.Dipelajari di Modul 13 · React dasar
useStatejuga: fungsi pembaru, batchingHook yang mengembalikan
[nilai, setNilai]: nilai untuk render ini (potret yang tetap selama satu render) dan fungsi untuk meminta render berikutnya. Pembaruan dalam satu event dikumpulkan; fungsi pembarux => x + 1menerima hasil sebelumnya.Contoh: tiga kali
setN(n + 1)dalam satu klik hanya menambah 1, tiga kalisetN((x) => x + 1)menambah 3.Dipelajari di Modul 13 · React dasar
UTF-16juga: unit kode, surrogate pair
Cara JavaScript menyimpan string: deretan unit 16 bit. Karakter di luar Basic Multilingual Plane, seperti kebanyakan emoji, butuh dua unit (surrogate pair), sehingga
.lengthbisa lebih besar daripada banyak karakter.Contoh:
"😀".lengthadalah 2.Dipelajari di Modul 02 · JavaScript dari kacamata Python
verbatimModuleSyntaxOpsi
tscyang mewajibkanimport typeuntuk impor yang hanya tipe, sehingga kode yang lolostscjuga bisa dijalankan Node yang hanya menghapus tipe.Contoh:
import { Produk } from "./jenis.ts"untuk tipe saja ditolak.Dipelajari di Modul 08 · Node, npm, dan rantai pasok
Vitest
Kerangka tes untuk proyek JavaScript dan TypeScript:
describe/it,expect,vi.fn,vi.stubGlobal,vi.useFakeTimers,expectTypeOf, dan--coverage.Contoh:
expect(formatRupiah(-5000)).toBe("-Rp5.000").Dipelajari di Modul 11 · Pengujian
WCAGjuga: Web Content Accessibility Guidelines
Pedoman aksesibilitas W3C (versi 2.2, 2023) dengan kriteria yang bisa diperiksa, misalnya 1.3.1 label tersambung, 3.3.1 galat disebut dengan teks, dan 4.1.2 keadaan terbaca teknologi bantu.
Contoh: isian jumlah yang hanya diberi bingkai merah melanggar 3.3.1.
Dipelajari di Modul 10 · DOM, event, dan formulir
Web Componentsjuga: Custom Elements, Shadow DOM
Standar web untuk membuat elemen sendiri tanpa kerangka kerja: Custom Elements (
customElements.define, nama wajib bertanda hubung) dan Shadow DOM (pohon tersembunyi yang terisolasi).Contoh:
<kartu-omzet nilai="Rp381.800">.Dipelajari di Modul 10 · DOM, event, dan formulir
wideningjuga: pelebaran tipe
Cara
tscmelebarkan tipe literal menjadi tipe umumnya bila nilainya bisa berubah, misalnyaletatau medan objek tanpa anotasi.Contoh:
const b = { metodeBayar: "tunai" }membuatb.metodeBayarbertipestring, bukan"tunai".Dipelajari di Modul 05 · Objek, array, dan generic
XSSjuga: cross-site scripting
Celah keamanan saat data dari luar diurai peramban sebagai kode dan dijalankan dengan hak halaman itu. Jenisnya tersimpan, dipantulkan, dan berbasis DOM.
Contoh: nama produk
<script>kirimCookie()</script>yang disambung mentah ke HTML.Dipelajari di Modul 01 · Cara kerja web
z.coerceSkema Zod yang mengubah masukan dengan
Number(x)(atau sejenisnya) sebelum memeriksa. Isian kosong lolos sebagai0, jadi jarang cocok untuk masukan manusia.Contoh:
z.coerce.number().parse("")menghasilkan0.Dipelajari di Modul 12 · Data di batas sistem
z.inferjuga: z.outputTipe yang diturunkan dari skema Zod tanpa ditulis tangan. Tanpa
.readonly(), medannya bisa diubah, sehingga berbeda dari tipe kanonik yangreadonly; tesSamamenangkapnya.Contoh:
cekTipe<Sama<z.infer<typeof SkemaLaporan>, Laporan>>().Dipelajari di Modul 12 · Data di batas sistem
Zodjuga: skema Zod, ZodError
Pustaka skema TypeScript: bentuk data ditulis sebagai nilai, yang memberi pengurai saat berjalan (
parse,safeParse) dan tipe statis (z.infer). Masalah dikumpulkan diissues, masing-masing denganpath,code, danmessage.Contoh:
z.object({ jumlah: z.int().positive() }).safeParse({ jumlah: "2" })gagal dijumlah.Dipelajari di Modul 12 · Data di batas sistem