Posted inDevelopment

Zod: Chốt chặn Runtime Error tối thượng cho dự án TypeScript

Development tutorial - IT technology blog
Development tutorial - IT technology blog

TypeScript không màu hồng như bạn tưởng

Hệ thống báo “All green”, không một dòng lỗi đỏ nào trong VS Code. Bạn tự tin deploy. Thế nhưng, ứng dụng bỗng crash ngay trên tay người dùng vì một field user_id từ API trả về null thay vì string như interface bạn đã khai báo.

Lý do rất đơn giản: TypeScript chỉ bảo vệ bạn lúc viết code (compile-time). Khi chạy trên trình duyệt (runtime), mọi định nghĩa interface đều biến mất. Nếu dữ liệu đầu vào từ người dùng hoặc API bị sai lệch, TypeScript hoàn toàn bất lực. Đây là lỗ hổng chết người mà mọi developer cần lấp đầy bằng một giải pháp validate dữ liệu runtime.

Cái bẫy mang tên Type Casting (as MyType)

Nhiều bạn có thói quen dùng as MyType khi nhận dữ liệu từ API. Ví dụ:

const user = await fetch('/api/user').then(res => res.json()) as User;

Cách làm này giống như bạn đang tự lừa dối chính mình. Bạn ra lệnh cho TypeScript tin tưởng dữ liệu tuyệt đối mà không có bước kiểm chứng nào. Chỉ cần Backend thay đổi cấu trúc nhỏ, toàn bộ logic phía sau sẽ sụp đổ. Chúng ta thiếu một bộ lọc tại “cửa ngõ” để đảm bảo dữ liệu thực sự sạch trước khi đi sâu vào hệ thống.

Zod – Giải pháp đồng bộ Type và Schema

Zod ra đời để thu hẹp khoảng cách giữa compile-time và runtime. Nó giúp bạn định nghĩa Schema (lược đồ dữ liệu) cực kỳ chặt chẽ. Từ một Schema này, Zod vừa kiểm tra dữ liệu thực tế, vừa tự động sinh ra Type cho TypeScript.

Trong một dự án E-commerce mình từng tham gia với 5 dev, việc áp dụng Zod đã giúp giảm 40% thời gian debug các lỗi liên quan đến data mapping. Thay vì ngồi đoán API trả về cái gì, cả team chỉ cần nhìn vào file Schema chung là biết chắc chắn cấu trúc dữ liệu.

Bắt đầu trong 30 giây

Cài đặt cực kỳ đơn giản qua npm:

npm install zod

Định nghĩa Schema thực tế

Hãy thử tạo một Schema cho đối tượng User. Thay vì viết interface thụ động, chúng ta dùng Zod:

import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  username: z.string().min(3, "Tên phải từ 3 ký tự").max(20),
  email: z.string().email("Email không đúng định dạng"),
  age: z.number().min(18).optional(),
  isActive: z.boolean().default(true),
});

Zod tích hợp sẵn các bộ lọc như .email() hay .uuid(). Bạn sẽ không bao giờ phải đau đầu viết lại đống Regex phức tạp nữa.

Kỹ thuật đồng bộ Schema và Type với z.infer

Việc phải duy trì cả interface User và UserSchema là một cực hình. Zod giải quyết vấn đề này bằng z.infer. Chỉ cần một dòng code, bạn sẽ có ngay Type tương ứng:

type User = z.infer<typeof UserSchema>;

const myUser: User = {
  id: "550e8400-e29b-41d4-a716-446655440000",
  username: "itfromzero",
  email: "[email protected]",
  isActive: true
};

Thực chiến: Bảo vệ ứng dụng trước dữ liệu API

Đây là nơi Zod tỏa sáng nhất. Thay vì phó mặc cho số phận, hãy để Zod kiểm soát dữ liệu trả về từ Server. Mình thường dùng safeParse để xử lý lỗi một cách chuyên nghiệp:

async function fetchUserData(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  const rawData = await response.json();

  const result = UserSchema.safeParse(rawData);

  if (!result.success) {
    // Gửi log lỗi về Sentry để team xử lý ngay
    console.error("Lỗi cấu trúc API:", result.error.format());
    throw new Error("Dữ liệu không hợp lệ");
  }

  return result.data; // Data lúc này đã sạch và đúng kiểu
}

Sử dụng safeParse giúp ứng dụng không bị crash bất ngờ, cho phép bạn xử lý fallback UI mượt mà hơn.

Zod + React Hook Form: Cặp bài trùng hoàn hảo

Trong Frontend, Zod kết hợp với React Hook Form giúp logic validate trở nên cực kỳ gọn nhẹ. Bạn tách biệt hoàn toàn quy tắc kiểm tra (validation logic) ra khỏi giao diện (UI).

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

const loginSchema = z.object({
  email: z.string().email("Email không hợp lệ"),
  password: z.string().min(6, "Mật khẩu tối thiểu 6 ký tự"),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(loginSchema),
});

Thậm chí, bạn có thể tái sử dụng loginSchema này ở phía Node.js Backend để đảm bảo hai bên luôn đồng nhất quy tắc validate.

Lưu ý “xương máu” khi triển khai

Sau nhiều năm làm dự án thực tế, đây là 3 kinh nghiệm mình rút ra:

  • Nới lỏng khi cần thiết: Nếu làm với hệ thống cũ (legacy), đừng siết chặt schema ngay lập tức. Hãy validate các trường cốt yếu trước, sau đó mới thắt chặt dần.
  • Sức mạnh của .transform(): Zod không chỉ để check. Bạn có thể dùng .transform() để chuyển đổi dữ liệu, ví dụ đổi một ISO String thành đối tượng Date ngay khi parse.
  • Đa ngôn ngữ hóa lỗi: Tận dụng việc custom error message để hiển thị thông báo tiếng Việt hoặc tích hợp thư viện i18n dễ dàng.

Lời kết

Zod không đơn thuần là một thư viện, nó là tư duy lập trình phòng thủ. Bỏ thêm 5 phút viết Schema sẽ cứu bạn khỏi hàng giờ ngồi mò mẫm lỗi “undefined” quái chiêu lúc nửa đêm. Nếu bạn đang build dự án TypeScript, hãy tích hợp Zod ngay hôm nay để thấy sự khác biệt về độ ổn định.

Share:
Tags: