Zodとは？

TypeScript用のスキーマバリデーションライブラリです

特徴

・スキーマベースの検証
　データの形式や型を「スキーマ」で定義し、そのスキーマを使って簡単にデータ検証が可能
・TypeScriptと相性抜群
　TypeScript型をZodが自動で推測するため、型定義の重複を防ぎ、コードを効率化できる(型推論)
・一貫した型とバリデーション
バリデータを1回宣言するだけで、静的なTypeScript型を自動生成し、型の整合性を保てる。

インストール

要件
・TypeScript 4.5以上
・tsconfig.jsonファイルのstrictモードを有効にする

tsconfig.json

{ 
  // ... 
  "compilerOptions" : { 
    // ... 
    "strict" : true 
  } 
}

npm install zod        # npm の場合
yarn add zod           # yarn の場合

zod document インストール

使い方

シンプルな文字列のスキーマの作成

 //"zod"から{  z  } をインポートする 
import { z } from "zod";

// 文字列のスキーマを作成する
const schema = z.string();

// 解析
schema.parse("Hi"); // OK
schema.parse(123); // = > ZodErrorをスローする

オブジェクトスキーマの作成

import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Eva" });//OK

// 推論された型を抽出する
type User = z.infer<typeof User>;
// { username: string }

Zod document basic usage

型定義色々

プリミティブの型定義

z.string(); // 文字列型
z.number(); // 数値型
z.bigint(); // BigInt型
z.boolean(); // 真偽値型
z.date(); // Dateオブジェクト型
z.symbol(); // Symbol型

空の型（Empty Types）

z.undefined(); 
z.null();     
z.void();      // 値が undefined または void であることを保証

全ての値を許容する型

z.any();     // 任意の値を許容
z.unknown(); // 任意の値を許容（ただし明確な型情報がない場合に利用）// 数値型に条件を追加

型定義の具体例

const schema = z.number().min(1).max(100); // 1以上100以下

// 文字列型に条件を追加
const stringSchema = z.string().min(5).max(20); // 長さ5文字以上20文字以下

型推論

.infer

スキーマを利用してTypescriptの型を生成できる
!型推論により、Zodスキーマと重複してTypescriptの型定義をしなくて良い

// Zodスキーマを定義
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  isAdmin: z.boolean(),
});

// TypeScript型を自動で推測
type User = z.infer<typeof UserSchema>;

// 例: 推測された型を利用
const user: User = {
  id: 1,
  name: "Toni",
  isAdmin: false,
};

スキーマメソッド

個人開発で使用したスキーマメソッドを２つ挙げます。

.parse

dataを検証、有効かどうかを確認する。
有効であれば型情報を含む値を返す
無効の場合は、エラーをスロー

const stringSchema = z.string();

stringSchema.parse("meat"); // => returns "meat"
stringSchema.parse(12); // throws error

Zod document parse

.refine

TypeScript の型システムでは表現できない型やデータの検証を行う、
特定の条件を満たすかどうかをチェックする
具体的な使用例：
　数値が整数であるかどうかをチェック
　文字列が有効な電子メールアドレスであるかどうかをチェック
引数：
第一引数：条件を判定するための検証関数（例: value => value > 10）。
第二引数：エラー時に使用するメッセージやデータ。
動作：
入力された値が条件を満たす場合、その値を通過させる。
条件を満たさない場合、エラーをスローする。

// 日付型に条件を追加
const dateSchema = z.date().refine(date => date > new Date('2024-01-01'), {
 message: "Date must be after 2024-01-01",
});

Zod document refine

まとめ

Zodを使って初めてフォームを作成し、簡単なサンプルを備忘録として記録しました。
個人的には、TypeScriptの型定義を再度記述する必要のない点が便利だと感じました。
今後、Zod以外のバリデーションライブラリにもチャレンジしたいです。

参考

Zod Document
TypeScript開発に欠かせない？Zodライブラリの基本
 サバイバルTypescript