Zod та TypeScript

npm install zod

import { z } from "zod";

import { z } from "zod";

const registrationSchema = z.object({
  fullName: z
    .string()
    .trim()
    .min(2, "Ім’я має містити щонайменше 2 символи"),

  email: z
    .string()
    .trim()
    .email("Введіть коректну адресу електронної пошти"),

  age: z
    .number()
    .int("Вік має бути цілим числом")
    .min(18, "Реєстрація доступна з 18 років")
    .max(120, "Введіть коректний вік"),
});

type RegistrationData = z.infer<typeof registrationSchema>;

type RegistrationData = {
  fullName: string;
  email: string;
  age: number;
};

const validData: RegistrationData = {
  fullName: "Олена Коваль",
  email: "olena@example.com",
  age: 25,
};

const invalidData: RegistrationData = {
  fullName: "Олена Коваль",
  email: "olena@example.com",
  age: "25", // Помилка: очікується number
};

const data = registrationSchema.parse({
  fullName: "Олена Коваль",
  email: "olena@example.com",
  age: 25,
});

console.log(data.fullName);

try {
  const data = registrationSchema.parse({
    fullName: "Олена",
    email: "invalid-email",
    age: 16,
  });

  console.log("Дані перевірено:", data);
} catch (error) {
  console.error("Дані некоректні:", error);
}

const result = registrationSchema.safeParse({
  fullName: "Олена Коваль",
  email: "olena@example.com",
  age: 25,
});

if (result.success) {
  // Тут result.data має тип RegistrationData
  console.log("Перевірені дані:", result.data);
} else {
  // Тут result.error містить інформацію про помилки
  console.log(result.error.issues);
}

result.success === true

result.success === false

const result = registrationSchema.safeParse({
  fullName: "",
  email: "wrong",
  age: 15,
});

if (!result.success) {
  for (const issue of result.error.issues) {
    console.log(issue.path, issue.message);
  }
}

[ 'fullName' ] Ім’я має містити щонайменше 2 символи
[ 'email' ] Введіть коректну адресу електронної пошти
[ 'age' ] Реєстрація доступна з 18 років

import { FormEvent, useState } from "react";
import { z } from "zod";

const registrationSchema = z.object({
  fullName: z
    .string()
    .trim()
    .min(2, "Ім’я має містити щонайменше 2 символи"),

  email: z
    .string()
    .trim()
    .email("Введіть коректну адресу електронної пошти"),

  age: z
    .number()
    .int("Вік має бути цілим числом")
    .min(18, "Реєстрація доступна з 18 років")
    .max(120, "Введіть коректний вік"),
});

type RegistrationData = z.infer<typeof registrationSchema>;

const initialForm: RegistrationData = {
  fullName: "",
  email: "",
  age: 0,
};

export default function RegistrationForm() {
  const [form, setForm] = useState<RegistrationData>(initialForm);
  const [errors, setErrors] = useState<Record<string, string[]>>({});
  const [submittedData, setSubmittedData] =
    useState<RegistrationData | null>(null);

  const updateField = (
    field: keyof RegistrationData,
    value: string
  ) => {
    setForm((currentForm) => ({
      ...currentForm,
      [field]: field === "age" ? Number(value) : value,
    }));

    setErrors((currentErrors) => ({
      ...currentErrors,
      [field]: [],
    }));
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const result = registrationSchema.safeParse(form);

    if (!result.success) {
      const nextErrors: Record<string, string[]> = {};

      for (const issue of result.error.issues) {
        const field = issue.path[0];

        if (typeof field === "string") {
          nextErrors[field] ??= [];
          nextErrors[field].push(issue.message);
        }
      }

      setErrors(nextErrors);
      setSubmittedData(null);
      return;
    }

    setErrors({});
    setSubmittedData(result.data);

    // result.data має тип RegistrationData і пройшов перевірку
    console.log("Форму успішно надіслано:", result.data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="fullName">Ім’я</label>
        <input
          id="fullName"
          name="fullName"
          value={form.fullName}
          onChange={(event) =>
            updateField("fullName", event.target.value)
          }
        />
        {errors.fullName?.map((message) => (
          <p key={message}>{message}</p>
        ))}
      </div>

      <div>
        <label htmlFor="email">Електронна пошта</label>
        <input
          id="email"
          name="email"
          type="email"
          value={form.email}
          onChange={(event) =>
            updateField("email", event.target.value)
          }
        />
        {errors.email?.map((message) => (
          <p key={message}>{message}</p>
        ))}
      </div>

      <div>
        <label htmlFor="age">Вік</label>
        <input
          id="age"
          name="age"
          type="number"
          value={form.age}
          onChange={(event) => updateField("age", event.target.value)}
        />
        {errors.age?.map((message) => (
          <p key={message}>{message}</p>
        ))}
      </div>

      <button type="submit">Зареєструватися</button>

      {submittedData && (
        <pre>{JSON.stringify(submittedData, null, 2)}</pre>
      )}
    </form>
  );
}

const [form, setForm] = useState<RegistrationData>(initialForm);

const ageSchema = z
  .string()
  .trim()
  .regex(/^\d+$/, "Введіть число")
  .transform(Number)
  .refine((age) => age >= 18, "Реєстрація доступна з 18 років");

const age = ageSchema.parse("25");

console.log(age); // 25

type AgeInput = z.input<typeof ageSchema>;   // string
type AgeOutput = z.output<typeof ageSchema>; // number

type Age = z.infer<typeof ageSchema>; // number

const profileSchema = z.object({
  name: z.string().trim().min(2, "Введіть ім’я"),
  age: z
    .string()
    .trim()
    .regex(/^\d+$/, "Вік має бути числом")
    .transform(Number)
    .refine((value) => value >= 18, "Мінімальний вік — 18 років"),
});

type ProfileInput = z.input<typeof profileSchema>;
type Profile = z.output<typeof profileSchema>;

const input: ProfileInput = {
  name: "Олена",
  age: "25",
};

const profile: Profile = profileSchema.parse(input);

console.log(profile.age); // number

type ApiUser = {
  id: number;
  email: string;
};

const user = response as ApiUser;

const apiUserSchema = z.object({
  id: z.number().int().positive(),
  email: z.string().email(),
});

type ApiUser = z.infer<typeof apiUserSchema>;

function readUser(payload: unknown): ApiUser | null {
  const result = apiUserSchema.safeParse(payload);

  if (!result.success) {
    console.error("Некоректні дані користувача");
    return null;
  }

  return result.data;
}

const emailSchema = registrationSchema.pick({
  email: true,
});

const result = emailSchema.safeParse({
  email: "olena@example.com",
});

const result = registrationSchema.shape.email.safeParse(
  "olena@example.com"
);

if (result.success) {
  console.log("Email коректний:", result.data);
}

type FormData = {
  email: string;
};

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

const data = input as RegistrationData;

const result = registrationSchema.safeParse(input);

const schema = z.string().transform(Number);

type Input = z.input<typeof schema>;   // string
type Output = z.output<typeof schema>; // number

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

type Data = {
  email: string;
};

type Data = z.infer<typeof schema>;

const data = schema.parse(userInput);

const result = schema.safeParse(userInput);