Borang Selamat Jenis & Kontrak Respons API
Gunakan Zod untuk membuat kesimpulan jenis TypeScript daripada skema dan mengesahkan data borang serta respons API.
Borang Selamat Jenis & Kontrak Respons API ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Kepentingan Bentuk Data yang Selamat dari Segi Jenis
Borang dan respons API ialah sempadan tempat data memasuki aplikasi anda daripada sumber yang tidak dipercayai. Zod membolehkan anda mentakrifkan skema yang mengesahkan data pada masa jalan dan membuat inferens jenis TypeScript.
Asas Skema Zod
Takrifkan skema dengan API berantai Zod. Gunakan z.infer<typeof schema> untuk mengekstrak jenis TypeScript.
import { z } from 'zod';
const UserSchema = z.object({
id: z.string().uuid(),
name: z.string().min(1).max(100),
email: z.string().email(),
age: z.number().int().min(0).max(150).optional(),
role: z.enum(['admin', 'user', 'guest']),
});
type User = z.infer<typeof UserSchema>;
// { id: string; name: string; email: string; age?: number; role: 'admin'|'user'|'guest' }React Hook Form dengan Penyelesai Zod
Integrasikan skema Zod dengan React Hook Form untuk pengesahan borang yang selamat dari segi jenis — TypeScript mengetahui bentuk data borang dan ralat.
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
const LoginSchema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'At least 8 characters'),
});
type LoginData = z.infer<typeof LoginSchema>;
function LoginForm() {
const { register, handleSubmit, formState: { errors } } = useForm<LoginData>({
resolver: zodResolver(LoginSchema),
});
const onSubmit = (data: LoginData) => {
// data is LoginData — fully typed, already validated
};
}Mengesahkan Respons API
Huraikan respons API dengan Zod untuk mengesan ketidakpadanan bentuk pada sempadan — jika API mengembalikan data yang tidak dijangka, anda mendapat ralat terperinci dan bukannya ranap masa jalan jauh di dalam komponen.
async function fetchUser(id: string): Promise<User> {
const res = await fetch(`/api/users/${id}`);
const json = await res.json();
return UserSchema.parse(json); // throws ZodError if shape is wrong
}Huraian Selamat untuk Ralat yang Lancar
Gunakan schema.safeParse() untuk mendapatkan objek hasil dan bukannya melontarkan ralat — sesuai untuk pengesahan borang apabila anda mahu memaparkan ralat kepada pengguna.
const result = UserSchema.safeParse(formData);
if (!result.success) {
const errors = result.error.flatten().fieldErrors;
// { name: ['Must be at least 1 character'], email: ['Invalid email'] }
return errors;
}
const user = result.data; // User — fully typedKesatuan Berdiskriminan dengan Zod
Gunakan z.discriminatedUnion untuk memodelkan respons API yang mempunyai bentuk berbeza berdasarkan penanda kejayaan atau ralat.
const ApiResponse = z.discriminatedUnion('ok', [
z.object({ ok: z.literal(true), data: UserSchema }),
z.object({ ok: z.literal(false), error: z.string(), code: z.number() }),
]);
type ApiResult = z.infer<typeof ApiResponse>;
// { ok: true; data: User } | { ok: false; error: string; code: number }Transformasi Zod
Gunakan .transform() untuk menukar jenis atau membentuk semula data semasa penghuraian — contohnya, menukar rentetan tarikh kepada objek Date.
const DateSchema = z.string().transform(s => new Date(s));
// Input: '2024-01-15' → Output: Date object
const EventSchema = z.object({
title: z.string(),
date: z.string().pipe(z.coerce.date()),
});
type Event = z.infer<typeof EventSchema>;
// { title: string; date: Date }Menggunakan Semula Skema
Terbitkan skema penciptaan dan kemas kini daripada schema asas untuk mengelakkan penduaan.
const UserSchema = z.object({ name: z.string(), email: z.string().email() });
// For creation: add password
const CreateUserSchema = UserSchema.extend({ password: z.string().min(8) });
// For update: all fields optional
const UpdateUserSchema = UserSchema.partial();
type CreateUser = z.infer<typeof CreateUserSchema>;
type UpdateUser = z.infer<typeof UpdateUserSchema>;Tindakan Pelayan dengan Zod
Sahkan data borang dalam Tindakan Pelayan Next.js dengan Zod sebelum mengakses pangkalan data.
async function createPost(formData: FormData) {
'use server';
const schema = z.object({ title: z.string().min(3), body: z.string().min(10) });
const result = schema.safeParse(Object.fromEntries(formData));
if (!result.success) return { errors: result.error.flatten().fieldErrors };
await db.post.create({ data: result.data });
revalidatePath('/blog');
redirect('/blog');
}Skema Dikongsi antara Bahagian Hadapan dan Belakang
Eksport skema Zod daripada pakej dikongsi supaya bahagian hadapan dan belakang menggunakan logik pengesahan yang sama — satu skema menjadi sumber rujukan tunggal.
// packages/schemas/src/user.ts
export const CreateUserSchema = z.object({ ... });
export type CreateUser = z.infer<typeof CreateUserSchema>;
// Frontend imports:
import { CreateUserSchema, CreateUser } from '@company/schemas';
// Backend imports:
import { CreateUserSchema } from '@company/schemas';Mesej Ralat Zod
Sesuaikan mesej ralat bagi setiap medan untuk pengalaman pengguna yang lebih baik — Zod menghantarnya kepada paparan ralat borang secara automatik melalui penyelesai.
const RegistrationSchema = z.object({
username: z.string()
.min(3, 'Username must be at least 3 characters')
.max(20, 'Username cannot exceed 20 characters')
.regex(/^[a-z0-9_]+$/, 'Only lowercase letters, numbers, and underscores'),
});Semakan Pantas
Apakah yang disediakan oleh z.infer
Ringkasan
Takrifkan skema Zod sekali sahaja dan gunakan z.infer untuk menerbitkan jenis TypeScript. Gunakan zodResolver dalam React Hook Form untuk pengesahan selamat jenis. Huraikan respons API dengan Zod pada sempadan, gunakan safeParse untuk ralat yang dipaparkan kepada pengguna, dan kongsikan skema antara bahagian hadapan dan belakang melalui pakej dikongsi.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Borang Selamat Jenis & Kontrak Respons API” percuma?
Ya — teks penuh “Borang Selamat Jenis & Kontrak Respons API” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Borang Selamat Jenis & Kontrak Respons API”?
Gunakan Zod untuk membuat kesimpulan jenis TypeScript daripada skema dan mengesahkan data borang serta respons API. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Borang Selamat Jenis & Kontrak Respons API” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Kesatuan Berbeza untuk Varian Komponen
- Jenis Bersyarat & Dipetakan dalam React
- Komponen Polimorfik dengan Prop 'as'
- Borang Selamat Jenis & Kontrak Respons API