Zodを触ってみた話
Photo by Yannick Pipke on Unsplash
Zodってなに・・・
Zod公式 : https://github.com/colinhacks/zod
公式ページを見てみると
ZodはTypeScript初のスキーマ宣言と検証のためのライブラリである。
スキーマ、という言葉は、単純な文字列から複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指すために使っている。
Zodは可能な限り開発者に優しい設計になっています。
その目的は、重複した型宣言を排除することです。
Zodを使えば、バリデータを一度宣言すれば、Zodが自動的に静的なTypeScriptの型を推論してくれる。
より単純な型を複雑なデータ構造に合成することも簡単だ。
・・・とあります!
なるほど!よくわからないです。。。
簡単にまとめると、Zodとはデータ型を扱うvalidationライブラリで、
スキーマと異なるデータ型を排除することができます。
言葉だけでは分かりづらいので実際に使ってみます!
まずは、zodのインストールからです。
私は普段yarnを使うのでここではyarnを使用しています。
yarn add zod
使い方
まずは基本的な使い方です。
Formに文字列型を定義しているので、文字列以外はparseでエラーが吐かれます。
import {z} from "zod";
const Form = z.string();
Form.parse('akira');
//エラーが吐かれます。
Form.parse(18);
数値を入力した箇所をコンソールで見てみると、
このようなエラーが吐かれます。
エラー内容はstring型を期待したが、受け取ったのはnumber型ですというエラーです。
ZodError: [
{
"code":"invalid_type",
"expected":"string",
"received": "number",
"path": [],
"message": "Expected string, received number"
}
]
Object型
z.object()を使ってオブジェクト型でも定義することができます。
name,age,addressをそれぞれ文字列型で定義しています。
import {z} from "zod";
const Form = z.object({
name: z.string(),
age: z.string(),
address: z.string(),
})
Form.parse({name:'akira',age:'18',address:'Tokyo'})
//addressがないよというエラーが吐かれます。
Form.parse({name:'akira',age:'18',})
Formオブジェクトの中にあるaddressを入力しないと、
addressがないよというエラーが吐かれます。
入力漏れなどもエラーを吐いてくれるので非常にわかりやすいです!
ZodError: [
{
"code": "invalid_type",
"expected": "string",
"received": "undefined",
"path": [
"address"
],
"message": "Required"
}
]
Boolean型
z.boolean()を使って真偽値も簡単に定義できます。
invalid_type_errorを設定することでエラーメッセージをカスタマイズすることが出来ます。
import {z} from "zod";
const isActive = z.boolean({
required_error: "isActive is required",
invalid_type_error: "isActive must be a boolean",
});
isActive.parse(true)
isActive.parse(false)
isActive.parse('アキラ')
一番最後の行の文字列で入力したところは、invalid_type_errorで設定したエラーが吐かれます。
isActive.parse('アキラ')
ZodError: [
{
"code": "invalid_type",
"expected": "boolean",
"received": "string",
"path": [],
"message": "isActive must be a boolean"
}
]
まとめ
今回はZodの基本的な使い方についてまとめてみました!
導入もコマンド一つで出来て、バリデーションのチェックも簡単に行うことができるすぐれものでした!
基本的な使い方はわかったので、Zodを活用してより厳格なTypeScriptを書いていきたいと思います!