Pendahuluan

Selamat datang di materi belajar Zod.

Pada pengembangan aplikasi web, kita sering bekerja dengan data yang berasal dari luar, seperti form, response API, atau fail yang diunggah pengguna. Bentuk data tersebut tidak selalu dapat dipastikan, sehingga perlu divalidasi sebelum diproses. Cara paling sederhana adalah menulis pengecekan satu per satu untuk setiap field, namun lama-kelamaan akan terasa repetitif dan mudah terlewat.

TypeScript memang membantu, namun TypeScript hanya bekerja pada saat kompilasi. Pada saat aplikasi berjalan, data dari fetch, formData, atau JSON.parse hanya dianggap any oleh TypeScript. TypeScript tidak mengetahui apa-apa tentang data yang sebenarnya.

Di sinilah Zod hadir. Zod adalah library validasi yang memungkinkan kita menulis schema sekali, lalu menggunakannya untuk beberapa hal:

• Memvalidasi data pada saat runtime, baik dari API, form, fail, dan lainnya
• Menurunkan tipe TypeScript secara otomatis dari schema yang sama
• Membuat error message yang konsisten
• Menggunakan validasi yang sama di sisi server dan client

Sebagai gambaran singkat, kira-kira seperti ini Zod digunakan untuk memvalidasi data:

import { z } from 'zod';

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.email(),
});

// Data valid
console.log(
  userSchema.safeParse({
    name: 'Nauval',
    age: 28,
    email: 'nauval@example.com',
  }),
);

// Data tidak valid
console.log(
  userSchema.safeParse({
    name: 'Nauval',
    age: 'dua puluh delapan',
    email: 'bukan-email',
  }),
);

Tekan tombol Run untuk melihat hasilnya secara langsung. Untuk data yang valid, Zod mengembalikan objek dengan success: true. Sedangkan untuk data yang tidak valid, Zod menjelaskan dengan rinci field mana yang gagal dan apa alasannya.

Beberapa contoh kode pada materi belajar ini bersifat interaktif seperti ini, sehingga output dari Zod dapat dilihat secara langsung tanpa perlu menyiapkan proyek lokal terlebih dahulu.

Pada materi belajar ini, kita akan menggunakan satu studi kasus yang sama, yaitu merepresentasikan data pengguna pada sebuah aplikasi. Schema akan kita kembangkan secara bertahap, mulai dari yang paling sederhana hingga pattern yang biasa ditemukan di proyek nyata.

Apa yang Akan Kita Pelajari

Materi belajar ini dibagi menjadi beberapa modul:

• Schema Dasar: tipe-tipe primitif, object, optional, default, dan enum
• Manipulasi Schema: cara menurunkan schema baru dari schema yang sudah ada
• Validasi Lanjutan: refinement, custom error, locale, format error, dan type inference
• Zod di React: praktik langsung pada proyek React

Versi yang Digunakan

Materi belajar ini menggunakan Zod v4. Beberapa API yang akan dibahas, seperti z.email(), z.strictObject, z.looseObject, dan format error baru seperti treeifyError, hanya tersedia pada Zod v4. Apabila masih menggunakan Zod v3, sebagian contoh mungkin tidak berjalan persis sama.

Selamat belajar!