Zod
https://gyazo.com/4e0a66db0ee6a6403fd6fac5be2e2cd9
TypeScript-first schema validation with static type inference
Schemaから型を導出する
code:ts
// スキーマの例
const schema = z.object({ userID: z.string().transform(Number) })
// スキーマを元にトランスフォームなどの評価を終えたオブジェクトの型を得る
const x = {
userID: 1, // <= number 型になる
} satisfies z.infer<typeof schema>;
React Hook Formとの連携
code:tsx
import { zodResolver } from "@hookform/resolvers/zod";
import React from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
// Hooks を内包したコンポーネントの例
const Component = (props: { onSubmit: () => void }) => {
const { handleSubmit, register } = useForm({
resolver: zodResolver(z.object({ username: z.string() })),
defaultValues: { username: "" },
});
return (
<form onSubmit={handleSubmit(props.onSubmit)}>
<input {...register("username")} />
<button type="submit" />
</form>
);
};
関連