Konverter JSON ke Skema Zod

Apa itu skema Zod?

Contoh

{"id":101,"name":"Ada Lovelace","email":"ada@example.com","active":true,"roles":["admin","user"]}

import { z } from "zod";

export const RootSchema = z.object({
  id: z.number().int(),
  name: z.string(),
  email: z.string(),
  active: z.boolean(),
  roles: z.array(z.string()),
});

export type Root = z.infer<typeof RootSchema>;

{"repo":"zod","owner":{"login":"colinhacks","id":100}}

import { z } from "zod";

export const OwnerSchema = z.object({
  login: z.string(),
  id: z.number().int(),
});

export const RootSchema = z.object({
  repo: z.string(),
  owner: OwnerSchema,
});

export type Root = z.infer<typeof RootSchema>;

{"users":[{"id":1,"nick":"x"},{"id":2}]}

import { z } from "zod";

export const UserSchema = z.object({
  id: z.number().int(),
  nick: z.string().optional(),
});

export const RootSchema = z.object({
  users: z.array(UserSchema),
});

export type Root = z.infer<typeof RootSchema>;

{"items":[{"sku":"A1","discount":0.1},{"sku":"A2","discount":null}]}

import { z } from "zod";

export const ItemSchema = z.object({
  sku: z.string(),
  discount: z.number().nullable(),
});

export const RootSchema = z.object({
  items: z.array(ItemSchema),
});

export type Root = z.infer<typeof RootSchema>;

Cara mengonversi JSON ke Zod

1. 1

   Tempel JSON Anda

   Masukkan objek JSON, array, atau respons API ke kolom input. Konversi dimulai seketika.

2. 2

   Setel output

   Ganti nama skema root dan aktifkan atau nonaktifkan baris import, tipe z.infer, atau kata kunci export agar sesuai gaya proyek Anda.

3. 3

   Salin atau unduh

   Ambil skema Zod yang dihasilkan dengan satu klik dan tempel langsung ke lapisan validasi Anda.

Common Use Cases

Validasi respons API

Ubah sampel respons REST atau GraphQL menjadi skema Zod dan parsing di batas fetch, agar data yang cacat gagal cepat dengan error yang jelas alih-alih bocor ke seluruh aplikasi Anda.

Formulir dan input yang aman-tipe

Hasilkan skema untuk input formulir atau kueri dan pakai ulang tipe z.infer di seluruh UI dan handler Anda untuk keamanan tipe menyeluruh.

Skema tRPC dan alat AI

Bootstrap skema input dan output untuk prosedur tRPC atau alat keluaran-terstruktur AI dari contoh payload alih-alih menulisnya dengan tangan.

Cara kerja konversi

Inferensi struktural

Setiap objek menjadi skema bernama; bentuk yang identik dideklarasikan sekali lalu dipakai ulang. Array objek digabung kunci demi kunci, dan kunci yang absen dari sebagian item menjadi .optional().

Pemetaan tipe yang benar

Bilangan bulat dipetakan ke z.number().int() dan desimal ke z.number(). String, boolean, dan null dipetakan ke z.string(), z.boolean(), dan z.null(); array primitif campuran menjadi z.union().

Tipe TypeScript disertakan

Alias tipe z.infer dikeluarkan untuk skema root, sehingga skema tetap menjadi satu sumber kebenaran dan tipe Anda tak pernah menyimpang dari validasi Anda.

100% sisi klien

Parsing dan pembuatan berjalan di browser Anda tanpa panggilan jaringan, sehingga data Anda tetap privat.

Tips untuk skema Zod yang rapi

Beri nama skema root Anda

Tetapkan nama root yang bermakna seperti User atau ApiResponse alih-alih Root bawaan agar kode mudah dibaca dan mendokumentasikan dirinya sendiri.

Perhalus z.unknown() dan union

Array kosong atau campuran menghasilkan z.unknown() atau z.union() yang luas. Tempel sampel yang lebih kaya dan representatif agar alat menyimpulkan tipe yang presisi, lalu perketat apa pun yang masih ambigu.

Validasi di batas

Panggil safeParse() tempat data tak tepercaya masuk — respons API, input formulir, webhook — agar data buruk tertangkap sebelum mencapai logika aplikasi Anda.

Pertanyaan yang sering diajukan