Back to all articles
TypeScript

TypeScript Lab #04: Menjaga Konsistensi Schema Form dengan Zod

Schema form dengan Zod membantu frontend menjaga bentuk data tetap sinkron antara validasi, transformasi, dan kebutuhan submit ke server.

Aug 02, 2025
6 min read
TypeScriptZodFormsSchema

TypeScript Lab #04

Schema Form dengan Zod

www.hanifdaffa.com

Masalah umum pada form bukan hanya validasi yang terlewat, tetapi ketidaksinkronan antara tipe TypeScript, aturan input, dan bentuk payload akhir. Zod cukup efektif untuk menyatukan tiga hal itu.

Begitu schema dipakai sebagai sumber kebenaran, refactor jadi lebih aman. Field baru atau aturan baru tidak perlu dikejar manual di banyak file yang tersebar.

Mulai dari bentuk data akhir

Langkah awal yang paling berguna adalah menulis schema dari sudut pandang payload akhir, bukan dari field input satu per satu. Dengan begitu, kita tahu data seperti apa yang sebenarnya dibutuhkan sistem.

Setelah payload akhir jelas, barulah schema dipecah menjadi aturan per field dan optional transform yang memang diperlukan.

Pikirkan output sebelum input

  • Apa payload akhir yang dibutuhkan server?
  • Field mana yang opsional?
  • Transform apa yang benar-benar perlu terjadi sebelum submit?

Gunakan fitur schema secukupnya

Zod sangat kuat, tetapi tetap perlu disiplin. Saya menghindari transform yang terlalu banyak dalam satu schema karena sulit dibaca dan menyulitkan debugging ketika value berubah di tengah jalan.

Kalau logika transform sudah seperti business rule, lebih baik dipindahkan ke lapisan yang lebih eksplisit.

Developer meninjau schema dan validasi form TypeScript
Schema yang rapi menjadi titik temu antara typing, validasi, dan payload submit.

Jaga satu sumber kebenaran untuk form

Keuntungan terbesar schema yang rapi adalah konsistensi. Error message, typing, dan submit payload mengikuti sumber yang sama, sehingga tim tidak perlu terus menyamakan asumsi antar layer.

Untuk form yang sering berubah, pola ini terasa sangat hemat waktu dalam jangka panjang.

ts
const profileSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  role: z.enum(['admin', 'editor', 'viewer']),
})

Related reads

More Articles You Might Like

View all articles