Web開発ブログ

TypescriptでyupのObjectSchemaに型をつける

Typescript

作成

2023/07/31

使用したバージョン
yup 1.2.0
Typescript 5.1.6

typeをもとにしてyupのobjectを作成する

もしschemaの構造がtypeと異なるとエラーとなる。


import { ObjectSchema, object, number, string } from "yup";
type User = {
    name: string;
    age: number;
    email?: string;
};
const schema: ObjectSchema<User> = object({
    name: string().required(),
    age: number().required().positive().integer(),
    email: string().email()
});

yupのobjectをもとにしてtypeを作成する

上記と同じtypeが生成される。


import { ObjectSchema, object, number, string, InferType } from "yup";
const schema = object({
    name: string().required(),
    age: number().required().positive().integer(),
    email: string().email()
});
type User = InferType<typeof schema>;

React Hook FormのyupResolverに型付けする

react-hook-formのresolverとして使うことが多いのでその場合の方法。


import { yupResolver } from "@hookform/resolvers/yup";
import { ObjectSchema, object, number, string } from "yup";
type User = {
    name: string;
    age: number;
    email?: string;
};
const resolver = yupResolver<User>(
    object({
        name: string().required(),
        age: number().required().positive().integer(),
        email: string().email()
    })
);