Валидация и типизация с Zod

Детерминированный слой валидации, гарантирующий, что все данные, поступающие в систему, соответствуют определенным архитектурным контрактам.

Архитектура валидации Zod

Преимущества: Zod позволяет объединить рантайм-валидацию с типизацией TypeScript, создавая единый источник истины для форм и данных API.

Структура схем и типов Zod

Соглашения о наименовании

Схемы Zod:
Располагаются в папке schema. Файлы называются по шаблону [name].schema.ts. Схемы именуются заглавными буквами (напр. ENTITY_SCHEMA).
Типы и Интерфейсы:
Располагаются в папке types. Типы, выведенные из схем, именуются с префиксом T (напр. TEntitySchema). Все перечисления полей формы хранятся в объектах ENUM_FORM_....

01Определение схемы (Schema)

Создание Zod-объекта с использованием i18nKey для локализации сообщений об ошибках.

entities/entity-name/schema/entity-name.schema.ts

import { z } from "zod";
import { type TEntityPageKeys, i18nKey } from "@/shared/config";
import { ENUM_FORM_ENTITY } from "../types";

const msg = i18nKey<TEntityPageKeys>();

export const ENTITY_SCHEMA = z.object({
	[ENUM_FORM_ENTITY.DESCRIPTION]: z
		.string()
		.trim()
		.min(1, {
			message: msg("form.overview.fields.description.errors.required")
		})
		.min(3, {
			message: msg("form.overview.fields.description.errors.min")
		})
		.max(5000, {
			message: msg("form.overview.fields.description.errors.max")
		}),
});

02Вывод типов (Types)

Использование z.infer для автоматической генерации TypeScript типов из схемы.

entities/entity-name/types/entity-name.types.ts

import { z } from "zod";
import type { ENTITY_SCHEMA } from "../schema";

export const ENUM_FORM_ENTITY = {
	DESCRIPTION: "description",
} as const;

export type TEntitySchema = z.infer<typeof ENTITY_SCHEMA>;

03Интеграция с формой (Usage)

Подключение схемы к react-hook-form через zodResolver.

widgets/entity-name/ui/entity-name.tsx

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { type TEntitySchema, ENTITY_SCHEMA } from "@/entities/entity-name";

const form = useForm<TEntitySchema>({
    resolver: zodResolver(ENTITY_SCHEMA),
    mode: "onSubmit"
});