แปลง JSON เป็น Zod Schema: สร้าง Validation Schema สำหรับ TypeScript ในไม่กี่วินาที

ถ้าคุณเป็น developer ที่ทำงานกับ TypeScript คงเคยเจอสถานการณ์แบบน้: ได้รับ JSON response จาก API แล้วต้องนั่งเขียน Zod schema เพื่อ validate ข้อมูลก่อนนำไป่ใช้ในงานจริง การเขียน schema ด้วยมือสำหรับ JSON ที่มีเป็นสิบ ๆ field นั้นทั้งเสียเวลาและเสี่ยงต่อความผิดพลาด ไม่ว่าจะเป็นการพิมพ์ผิด ลืม field หรือกำหนด type ผิดพลาด

JSON to Zod Schema Converter คือเครื่องมือที่เกิดมาเพื่อแก้ปัญหานี้ โดยเฉพาะ เพียงแค่วาง JSON ลงไป คุณก็จะได้ Zod schema สมบูรณ์พร้อม z.infer() type inference ภายในไม่กี่วินาที พร้อมนำไป่ใช้ในโปรเจกต์ได้ทันที นี่คือ zod schema generator ที่ออกแบบมาเพื่องาน typescript validation โดยเฉพาะ เหมาะกับที่ต้องการทำ zod codegen อย่างรวดเร็วโดยไม้ต้องเขียนอะไรเอง

มากกว่านั้น เครื่องมือนั้ยังทำงานแบบ 100% client-side — ข้อมูลของคุณไม้เคยออกจาก browser ใช้ง้านได้ฟรี และไม้ต้องสมัครสมาชิก ไม่ว่าจะเป็นข้อมูลความลับของบริษัทหรือแค่อยากได้ความสะดวกรวดเร็ว ก็ใช้งานได้อย่างมุ่นใจ

ทำไมต้องใช้ JSON to Zod Schema Converter?

• ประหยัดเวลา — แทนที่จะนั่งพิมพ์ z.string() หรือ z.number() ทีละ field เครื่องมือจะสร้าง schema สมบูรณ์ให้อัตโนมัติจาก JSON ของคุณในครั้งเดียว
• ลดความผิดพลาด — การเขียนด้วยมือเสี่ยงต่อ typo การลืม field หรือการกำหนด type ผิด การตรวจจับ type อัตโนมัติจากค่า JSON จริงทำให้ schema ถูกต้องและสอดคล้องกับข้อมูล
• ได้ type ด้วย z.infer() — schema ที่ได้ถูกออกแบบมาให้ใช้งานร่วมกับ z.infer<typeof schema> ทำให้ได้ TypeScript type จาก single source of truth โดยไม้ต้องเขียน type ซ้ำ้
• รองรับโครงสร้างซับซ้อน — nested objects, arrays และ mixed-type arrays ถูกจัดการอัตโนมัติ โดยรวมเป็น z.union() ให้เมื่อจำเป็น
• ปรับแต่งได้ตามต้องการ — ตั้งชื่อ root schema, เปิด strict mode (.strict()), ทำให้ทุก field เป็น optional (.optional()), ใช้ z.coerce หรือกำหนดระยะ indent ได้ตามสไตล์โค้ดของคุณ
• เป็นส่วนตัว — ทำงาน 100% client-side ข้อมูลไม้ถูกส่งไป server ใด ๆ ใช้ง้านฟรี ไม่มีการสมัครสมาชิก

คุณสมบัติเด่น

นอกเหนือจากฟีเจอร์หลักในตาราง ยังมีรายละเอียดที่น่าสนใจอีกหลายอย่าง:

• ตรวจจับ type อัตโนมัติ — เครื่องมือตรวจสอบค่าแต่ละค่าใน JSON แล้วเลือก type ที่เหมาะสมให้ทันที ไม่ว่าจะเป็น string, number, boolean หรือ null
• แยก schema สำหรับ nested objects — object ที่ซ้อนกันอยู่ถูกแยกออกเป็น schema ที่มีชื่อเฉพาะ ทำให้อ่านง่ายและนำกลับมาใช้ซ้ำ้ได้
• กำหนด indent ได้ — เลือกระยะย่อหน้าให้เข้ากับ code style ของโปรเจกต์

วิธีใช้งาน

1. วาง JSON — วาง JSON ที่อยากรวมแปลงลงในช่อง input จะเป็น response จาก API, config file หรือ sample data ก็ไดั้
2. ตั้งค่า options — กำหนดชื่อ root schema, เปิด strict mode (.strict()) ถ้าอยากรับเฉพาะ field ที่กำหนด, เลือกให้ทุก field เป็น optional (.optional()), ใช้ z.coerce ถ้าต้องมีการแปลง type ของค่า และเลือกระยะ indent
3. กด Convert — คลิกปุ่มแปลง แล้วเครื่องมือจะสร้าง Zod schema ให้ทันที
4. ตรวจสอบ output — ดู schema ที่ได้ ตรวจสอบว่า type ถูกต้องตามข้อมูลของคุณ แล้วปรับแก้ตามความเหมาะสม
5. Copy หรือ download เป็นไฟล์ .ts — คัดลอกไป clipboard เพื่อนำไปวางในโปรเจกต์ หรือดาวน์โหลดเป็นไฟล์ .ts เพื่อนำไปใช้งานได้ทันที

เข้าใจ Zod และ Type Inference

Zod คืออะไร? Zod คือ schema validation library ที่ออกแบบมาเพื่อ TypeScript โดยเฉพาะ (TypeScript-first) ให้คุณกำหนดโครงสร้างของข้อมูลและ validate มันใน runtime สิ่งที่ทำให้มันพิเศษคือการออกแบบมาให้เข้ากับ ecosystem ของ TypeScript — การกำหนด schema และ type system ทำงานร่วมกันอย่างไร้รอยต่อ

ทำไม runtime validation จึงสำคัญ? ข้อจำกัดอย่างหนึ่งของ TypeScript คือ type จะหายไปใน runtime (type erasure) เมื่อคุณได้รับข้อมูลจากแหล่งภายนอก — ไม่ว่าจะเป็น API response, form input หรือ environment variables — TypeScript รับประกันไม้ได้ว่าข้อมูลจะตรงกับ type ที่ประกาศไว้ ถ้าใช้งานเลยโดยไม้ validate อาจเกิด runtime error ใน production ได้ การทำ runtime validation ด้วย Zod จึงเข้ามาอุดช่องว่างนี้: ถ้าข้อมูลผิดพลาด มันจะถูกจับได้ทันทีพร้อม error message ที่ชัดเจน

z.infer — single source of truth จุดเด่นที่สุดอย่างหนึ่งของ Zod คือ z.infer<typeof schema> ซึ่งสร้าง TypeScript type จาก schema ให้อัตโนมัติ:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string(),
  isActive: z.boolean(),
  tags: z.array(z.string()),
});

type User = z.infer<typeof UserSchema>;
// {
//   id: number;
//   name: string;
//   email: string;
//   isActive: boolean;
//   tags: string[];
// }

นั่นหมายความว่าคุณบำรุงรักษา schema ไว้ในที่เดียว แล้ว type จะตรงกันเสมอ — ไม้มีปัญหา interface กับ validator ไม่ตรงกันอีกต่อไป

z.coerce สำหรับ form/env input ในหลายกรณี input ที่เข้ามามักเป็น string — เช่น form data หรือ environment variables — z.coerce ช่วยแปลงค่าเหล่านั้นให้เป็น type ที่ต้องการ:

const EnvSchema = z.object({
  PORT: z.coerce.number(),
  DEBUG: z.coerce.boolean(),
  API_URL: z.string(),
});

const env = EnvSchema.parse(process.env);

Use cases ที่ใช้จริง

ตรวจสอบ API response

เมื่อ fetch ข้อมูลจาก REST API คุณไม้สามารถมั่นใจได้ 100% ว่า response จะตรงตามฟอร์แมตที่คาดไว้เสมอ การใช้ Zod schema ที่สร้างจาก sample response จริงช่วยให้ validate ได้ทันที:

const response = await fetch('/api/products');
const data = await response.json();
const products = ProductArraySchema.parse(data);

ถ้า API เปลี่ยนฟอร์แมต คุณจะรู้ทันทีที่จุด validate แทนที่ error จะลุกลามไปถึงส่วนอื่นของแอป

จัดการ form input

Form input จากผู้ใช้มักเป็น string เสมอ การใช้เครื่องมือสร้าง schema พร้อมตัวเลือก z.coerce ช่วยให้ validate และแปลงค่าได้ในขั้นตอนเดียว เช่น แปลง field ราคาเป็น number หรือค่า checkbox เป็น boolean

Parse config/env

Environment variables ทุกตัวเป็น string และอาจขาดหายได้ การ generate schema จากตัวอย่าง config แล้วใช้ validate ตอน startup ช่วยให้แอปแจ้ง errorทันทีที่เริ่มทำงาน ถ้าค่าที่ต้องการขาดหายไป แทนที่จะไปล้มกลางทางขณะประมวลผล

ย้ายจาก interface ที่เขียนเอง

ถ้าโปรเจกต์ของคุณมี TypeScript interface ที่เขียนเองและ function validate แยกกัน การย้ายมาใช้ Zod ช่วยรวมทั้งสองอย่างไว้ในที่เดียว เริ่มจากนำ JSON sample ที่มีอยู่มาแปลงเป็น schema ด้วยเครื่องมือ แล้วค่อย ๆ แทนที่ interface เดิมด้วย type ที่ infer จาก z.infer

Best Practices

• Validate ที่ boundary — ตรวจสอบข้อมูลที่จุดทางเข้าแอป เช่น API handler, จุด submit form หรือการอ่าน env เพื่อให้ข้อมูลภายในระบบเชื่อถือได้เสมอ
• เก็บ single source of truth — ใช้ Zod schema เป็นนิยามโครงสร้างข้อมูลเพียงแห่งเดียว แล้วใช้ z.infer สร้าง type ออกมา อย่าเขียน interface ซ้ำ้
• ใช้ .strict() กับ external payload — สำหรับข้อมูลจากภายนอก การเปิด strict mode เพื่อปฏิเสธ field ที่ไม้ได้กำหนด ช่วยตรวจจับการเปลี่ยนแปลงที่ไม้คาดคิดจากแหล่งข้อมูล
• ใช้ coercion เฉพาะจุดขอบ — ใช้ z.coerce ที่ input boundary เช่น form, env หรือ query params แต่อย่าใช้ในส่วนภายในระบบที่ type ควรถูกต้องตั้งแต่ต้น
• Reuse type ที่ infer ได้ — export type ที่ได้จาก z.infer ไปใช้ทั่วทั้งแอป เพื่อให้มั่นใจว่า type และ validator ตรงกันเสมอ
• ทดสอบ schema กับข้อมูลจริง — หลังจาก generate แล้ว ควรทดลอง parse กับ sample data จริงเพื่อยืนยันว่า schema ทำงานตามที่คาด

เริ่มสร้าง Zod Schema วันนี้

การเขียน Zod schema ด้วยมือไม้ใช่เรื่องจำเป็นอีกต่อไป ไม่ว่าคุณจะกำลังเริ่มโปรเจกต์ใหม่ เชื่อมต่อกับ API ใหม่ หรือย้ายระบบเดิม JSON to Zod Schema Converter ช่วยให้คุณแปลง JSON ให้เป็น schema พร้อมใช้ได้ภายในไม่กี่วินาที พร้อม z.infer() type inference, ตัวเลือก strict mode, optional และ coercion ทั้งหมดยังทำงานแบบ 100% client-side ปลอดภัยและฟรี

ลองใช้วันนี้ แล้วทำให้ runtime validation กลายเป็นส่วนหนึ่งที่ง่ายดายใน workflow ของคุณ!

เครื่องมือที่เกี่ยวข้อง

• JSON to TypeScript Converter — แปลง JSON เป็น TypeScript type และ interface พร้อมใช้ในโปรเจกต์
• JSON Schema Generator — สร้าง JSON Schema มาตรฐานจาก JSON สำหรับใช้ใน API documentation และ validation ในเครื่องมืออื่น ๆ
• JSON Formatter — จัดฟอร์แมตและ pretty-print JSON ให้อ่านง่าย ตรวจสอบก่อนนำไป่แปลงได้สะดวกขึ้น

ขอให้สนุกกับการ validate!