🚀 เส้นทางโปรแกรมเมอร์

Appearance

จัดการ Runtime Type ​

เมื่อเราต้องจัดการกับชนิดข้อมูลในขณะรันโปรแกรม (Runtime Type) และไม่แน่ใจว่าจะได้รับค่าอะไรเข้ามา เช่น การเรียก API ต่าง ๆ ซึ่งเราสามารถใช้ Zod ในการตรวจสอบและกำหนด Schema ของข้อมูลในขณะรันโปรแกรม เพื่อให้ตรงตามที่เราต้องการ

กำหนด Schema ของข้อมูลที่ต้องการ ดังนี้:

ts
import { z } from 'zod';

// นิยาม Schema ที่ต้องการ
export const responseBodySchema = z.object({
  userId: z.number(),
  id: z.number(),
  title: z.string(),
  completed: z.boolean(),
});

หลังจากที่เรานิยาม schema ไปแล้ว ให้ใช้คำสั่ง safeParse เพื่อตรวจสอบและแปลงข้อมูลในขณะรันโปรแกรม นำไปใช้งานในโค้ดได้เลย:

ts
const url = 'https://jsonplaceholder.typicode.com/todos/1';
export async function getUserData() {
  const rawBody = await (await fetch(url)).json();
  // เอา data ที่เป็น any type ไป validate โดยใช้ zod schema
  const parseBody = responseBodySchema.safeParse(rawBody);
  if (!parseBody.success) {
    const { error } = parseBody;
    throw new Error(`Schema is not correct, ${JSON.stringify(error.errors)}`);
  }

  return parseBody.data;
  //                 ^? { userId: number; id: number; title: string; completed: boolean; }
}

Zod เป็นพระเอกของเราในงานนี้เลย เพราะนอกจากจะเช็ค Schema ให้ตรงกับที่เราต้องการมั้ย

เราสามารถแปลงเป็น Type ของ TypeScript ให้เราไปทำอย่างอื่นได้ต่อ อีก ดีงามมากกกก 😍

ts
type Todo = z.infer<typeof responseBodySchema>;
//    ^? type Todo = { userId: number; id: number; title: string; completed: boolean; }

const myTodo: Todo = {
  userId: 1,
  id: 1,
  title: 'delectus aut autem',
  completed: false,
};

ใครไม่อยากใช้ zod เพียวๆ ก็มีคนทำ library เอาไว้ใช้

ลองเล่น Playground