Zenn
Open3

Zod

zod
pontaponta

Verify Unknown APIs with an Object Schema

  • 外部APIを利用するときはレスポンスの型が無い状態になる
  • response dataに対して、schema.parse(data)のようにすることで、型情報を追加することができる

Create an Array ofCustom Types

  • z.arrayでArrayを表現することができる
  • ↓のように使いまわせる
const StarWarsPeopleResults = z.unknown();
const StarWarsPeopleResults = z.object({
  results: z.array(StarWarsPerson),
});

Extract a Type from a Parser Object

  • z.infer<typeof Schema>でzod objectがtypeとして使えるようになる

Make Schemas Optional

  • .optional()でできる

Set a Default Value with Zod

  • .default()でできる

Be Specific with Allowed Types

  • .enum()
  • .union() + literal()

Complex Schema validation

  • min, max, emial, url, ...など色々ある

Reduce Duplicated Code by Composing Schemas

  • .merge()でbase objectを再利用するなど

Transform Data from within a Schema

pontaponta

Problem

React Hook Formで数値を渡したい時のSchemaをどう定義すれば良いのか？

Try

cosnt schema = z.number();

このSchemaを利用すると、<input type="number" ... />の値を渡しても以下のバリデーションエラーが出る

Expected number, received string

Solution

coerceを利用する。

+ cosnt schema = z.coerce.number();

参考資料