Validation & Type Safety with Zod

Deterministic validation layer ensuring that all data entering the system conforms to the defined architectural contracts.

Zod Validation Architecture

Benefits: Zod allows combining runtime validation with TypeScript typing, creating a single source of truth for forms and API data.

Zod Schema & Types Structure

Naming Conventions

Zod Schemas:
Located in the schema folder. Files are named following the [name].schema.ts pattern. Schemas are named in uppercase (e.g., ENTITY_SCHEMA).
Types & Interfaces:
Located in the types folder. Types inferred from schemas are named with a T prefix (e.g., TEntitySchema). All form field enums are stored in ENUM_FORM_... objects.

01Schema Definition

Creating a Zod object using i18nKey for localized error messages.

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")
		}),
});

02Type Inference

Using z.infer to automatically generate TypeScript types from the schema.

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>;

03Form Integration

Connecting the schema to react-hook-form via 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"
});