logo
eng-flag

Zod Notları ve İpuçları

İçindekiler

  1. Kurulum
  2. Temel Kullanım
  3. String Şemaları
  4. Sayı Şemaları
  5. Boolean Şemaları
  6. Tarih Şemaları
  7. Dizi Şemaları
  8. Nesne Şemaları
  9. Birleşim ve Kesişim Türleri
  10. Enum Şemaları
  11. Opsiyonel ve Nullable
  12. Özel Doğrulama
  13. Hata Yönetimi
  14. Parçalama ve Güvenli Parçalama
  15. React ile Entegrasyon

Kurulum

Zod'u kurun:

npm install zod

Temel Kullanım

Temel şema tanımlaması ve doğrulama:

import { z } from 'zod';

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

type User = z.infer<typeof schema>; // Şemadan TypeScript türü çıkarma

const result = schema.safeParse({
  name: 'John Doe',
  age: 30,
  email: 'john@example.com',
});

if (result.success) {
  console.log('Geçerli veri:', result.data);
} else {
  console.log('Doğrulama hataları:', result.error.errors);
}

String Şemaları

Çeşitli string doğrulama yöntemleri:

const stringSchema = z.object({
  username: z.string()
    .min(3, 'Kullanıcı adı en az 3 karakter olmalıdır')
    .max(20, 'Kullanıcı adı 20 karakteri geçmemelidir')
    .regex(/^[a-zA-Z0-9]+$/, 'Kullanıcı adı yalnızca alfanümerik karakterler içerebilir'),
  email: z.string().email('Geçersiz e-posta adresi'),
  password: z.string()
    .min(8, 'Şifre en az 8 karakter olmalıdır')
    .regex(/[A-Z]/, 'Şifre en az bir büyük harf içermelidir')
    .regex(/[0-9]/, 'Şifre en az bir rakam içermelidir'),
  url: z.string().url('Geçersiz URL'),
});

Sayı Şemaları

Sayı doğrulama yöntemleri:

const numberSchema = z.object({
  age: z.number()
    .positive('Yaş pozitif bir sayı olmalıdır')
    .int('Yaş bir tam sayı olmalıdır')
    .min(18, 'En az 18 yaşında olmalısınız')
    .max(100, 'En fazla 100 yaşında olmalısınız'),
  price: z.number()
    .positive('Fiyat pozitif olmalıdır')
    .multipleOf(0.01, 'Fiyat en fazla 2 ondalık basamağa sahip olmalıdır')
    .max(1000000, 'Fiyat 1.000.000'den küçük olmalıdır'),
});

Boolean Şemaları

Boolean doğrulama:

const booleanSchema = z.object({
  agreeToTerms: z.boolean()
    .refine((val) => val === true, 'Şartları kabul etmelisiniz'),
  receiveNewsletter: z.boolean().optional(),
});

Tarih Şemaları

Tarih doğrulama yöntemleri:

const dateSchema = z.object({
  birthDate: z.date()
    .max(new Date(), 'Doğum tarihi gelecekte olamaz'),
  appointmentDate: z.date()
    .min(new Date(), 'Randevu tarihi gelecekte olmalıdır'),
});

Dizi Şemaları

Dizi doğrulama yöntemleri:

const arraySchema = z.object({
  tags: z.array(z.string())
    .nonempty('En az bir etiket gereklidir')
    .max(5, 'Maksimum 5 etiket izin verilir'),
  scores: z.array(z.number().positive().int())
    .min(3, 'En az 3 not gereklidir'),
});

Nesne Şemaları

İç içe geçmiş nesne doğrulama:

const addressSchema = z.object({
  street: z.string(),
  city: z.string(),
  zipCode: z.string().regex(/^d{5}$/, 'Geçersiz posta kodu'),
});

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

Birleşim ve Kesişim Türleri

Birleşim ve kesişim türlerinin kullanımı:

const unionSchema = z.union([
  z.string(),
  z.number(),
  z.boolean(),
]);

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

Enum Şemaları

Enum şemaları oluşturma:

const RoleEnum = z.enum(['admin', 'user', 'guest']);

const userSchema = z.object({
  name: z.string(),
  role: RoleEnum,
});

Opsiyonel ve Nullable

Opsiyonel ve nullable alanların yönetimi:

const schema = z.object({
  name: z.string(),
  middleName: z.string().optional(),
  nickname: z.string().nullable(),
  age: z.number().optional().nullable(),
});

optional(): Alan mevcut olabilir ya da olmayabilir (değerini sağlanmadığında undefined olabilir).
nullable(): Alan mevcut olmalı ama açıkça null olarak ayarlanabilir.

Özel Doğrulama

Özel doğrulama kuralları oluşturma:

const customSchema = z.object({
  password: z.string()
    .min(8)
    .refine((val) => /[A-Z]/.test(val), 'Şifre bir büyük harf içermelidir')
    .refine((val) => /[0-9]/.test(val), 'Şifre bir rakam içermelidir'),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Şifreler uyuşmuyor",
  path: ["confirmPassword"],
});

Hata Yönetimi

Doğrulama hatalarının yönetimi:

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
});

const result = schema.safeParse({ name: '', email: 'geçersiz' });

if (!result.success) {
  console.log('Doğrulama hataları:');
  result.error.issues.forEach((issue) => {
    console.log(`${issue.path.join('.')}: ${issue.message}`);
  });
}

Parçalama ve Güvenli Parçalama

Parçalama ve güvenli parçalama yöntemlerinin kullanımı:

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

// Parçalama (geçersizse hata fırlatır)
try {
  const data = schema.parse({ name: 'John', age: '30' });
  console.log('Parçalanmış veri:', data);
} catch (error) {
  if (error instanceof z.ZodError) {
    console.log('Doğrulama hataları:', error.errors);
  }
}

// Güvenli parçalama (başarı/hata nesnesi döner)
const result = schema.safeParse({ name: 'John', age: '30' });
if (result.success) {
  console.log('Geçerli veri:', result.data);
} else {
  console.log('Doğrulama hataları:', result.error.errors);
}

React ile Entegrasyon

Zod'u React ve React Hook Form gibi bir form kütüphanesi ile kullanma:

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, 'İsim gereklidir'),
  email: z.string().email('Geçersiz e-posta'),
});

type FormData = z.infer<typeof schema>;

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      {errors.name && <p>{errors.name.message}</p>}
      
      <input {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}
      
      <button type="submit">Gönder</button>
    </form>
  );
}

2024 © Tüm hakları saklıdır - buraxta.com