TypeScript Validation

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 13+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : https://www.linkedin.com/company/programmer-zaman-now/
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Tiktok : https://tiktok.com/@programmerzamannow
● Email : [email protected]
Sebelum Belajar
● Kelas JavaScript dari Programmer Zaman Now
● Kelas NodeJS dari Programmer Zaman Now
● TypeScript Generic
Pengenalan Validation
Pengenalan Validation

● Saat kita membuat aplikasi, validasi adalah salah satu hal yang sangat penting untuk kita lakukan
● Validasi memastikan bahwa data sudah dalam keadaan benar atau sesuai sebelum di proses
● Validasi dilakukan untuk menjaga agar data kita tetap konsisten dan tidak rusak
● Validasi biasanya dilakukan di kode aplikasi, dan di constraint table di database
Diagram Validasi
Validasi di TypeScript

● TypeScript sayangnya tidak menyediakan library untuk validasi, oleh karena itu kita perlu
melakukan validasi secara manual
● Tapi untungnya, banyak library yang dibuat oleh komunitas programmer TypeScript yang bisa kita
gunakan untuk mempermudah kita melakukan validasi
● Salah satu library yang populer untuk melakukan validasi adalah library Zod
● https://zod.dev/
● Di kelas ini, kita akan menggunakan library Zod untuk belajar melakukan validasi
Membuat Project
Membuat Project

● Buat folder belajar-typescript-validation

● npm init
● Buka package.json, dan tambah type module
Menambah Library Jest untuk Unit Test

● npm install --save-dev jest @types/jest

● https://www.npmjs.com/package/jest
Menambah Library Babel

● npm install --save-dev babel-jest @babel/preset-env

● https://babeljs.io/setup#installation
Menambah TypeScript

● npm install --save-dev typescript

● https://www.npmjs.com/package/typescript
Setup TypeScript Project

● npx tsc --init

● Semua konfigurasi akan dibuat di file tsconfig.json
● Ubah “module” dari “commonjs” menjadi “ES6”
● Ubah "moduleResolution" menjadi "Node"
Setup TypeScript untuk Jest

● npm install --save-dev @babel/preset-typescript

● npm install --save-dev @jest/globals
● https://jestjs.io/docs/getting-started#using-typescript
Menginstall Zod

● npm install zod

Validation
Validation

● Zod mendukung validasi untuk banyak tipe data TypeScript, seperti string, number, boolean, dan
lain-lain
● Untuk menggunakan Zod, kita cukup import z dari package zod
● Selanjutnya, kita bisa menggunakan method-method sesuai dengan tipe datanya
Schema

● Hal pertama yang perlu kita lakukan untuk melakukan validasi adalah membuat Schema
● Schema adalah aturan-aturan yang sudah kita tentukan
● Setelah membuat schema, baru selanjutnya kita bisa melakukan validasi data menggunakan
schema tersebut
Kode : Membuat Schema
Validasi Tipe Data

● String : https://zod.dev/?id=strings
● Number : https://zod.dev/?id=numbers
● Boolean : https://zod.dev/?id=booleans
Kode : Validasi
Konversi Tipe Data
Konversi Tipe Data

● Saat kita membuat schema untuk tipe data seperti string, number dan boolean, kita harus
melakukan parse() menggunakan tipe yang sama
● Kadang-kadang, input dari pengguna bisa menggunakan tipe data berbeda, contoh input number
berupa string “1234”, input boolean berupa string “true”
● Zod memiliki object bernama coerce yang bisa digunakan untuk melakukan konversi tipe data
secara otomatis
Kode : Konversi Tipe Data
Date Validation
Date Validation

● Zod juga bisa digunakan untuk melakukan validasi tipe data Date
● https://zod.dev/?id=dates
Kode :
Validation Error
Validation Error

● Jika terjadi error karena data tidak valid, maka hasil zod akan melakukan throw ZodError
Kode : Zod Error
Kode : Validation Error
Object Validation
Object Validation

● Saat kita membuat aplikasi, kita sering sekali membuat JavaScript Object
● Untungnya Zod juga bisa digunakan untuk melakukan validasi JS Object, sehingga mempermudah
kita untuk melakukan sekaligus ke semua field di JS Object
● https://zod.dev/?id=objects
Kode : Object Validation
Nested Object

● Zod juga bisa digunakan untuk memvalidasi nested object

● Saat kita ingin memvalidasi nested object, kita harus tentukan object schema nya juga
Kode : Nested Object Validation
Collection Validation
Collection Validation

● Selain Object, kita juga bisa melakukan validasi untuk tipe Collection, seperti Array, Set dan Map
● https://zod.dev/?id=arrays
● https://zod.dev/?id=sets
● https://zod.dev/?id=maps
Kode : Array Validation
Kode : Set Validation
Kode : Map Validation
Custom Validation Message
Custom Validation Message

● Saat kita menggunakan Zod, secara default sudah terdapat message error
● Namun, jika kita ingin ubah message errornya, kita bisa ubah ketika menggunakan method di
schema
Kode : Custom Validation Message
Optional Validation
Optional Validation

● Secara default, saat membuat schema, data akan selalu wajib diisi
● Namun kadang mungkin kita butuh data yang tidak wajib, atau optional
● Kita bisa menggunakan optional() method pada schema, untuk menjadikan bahwa field tersebut
tidak wajib
Kode : Optional Validation
Transform
Transform

● Saat membuat schema, terdapat function bernama transform yang bisa kita gunakan untuk
melakukan transformasi data setelah proses parse selesai
Kode : Transform
Custom Validation
Custom Validation

● Saat menggunakan transform(), kita bisa menambahkan parameter kedua yaitu RefinementCtx,
dimana bisa kita gunakan untuk menambahkan issue jika terjadi masalah
● Hal ini bisa digunakan sebagai custom validation
Kode : RefinementCtx
Kode : Custom Validation
Penutup