yup resolver incompatible error

❓ 문제

react-hook-form을 쓰면서 유효성 검사 라이브러리로 yup를 사용했다.
resolver를 작성하는데 빨간 줄이 그이며 오류가 있다고 했다.

Type 'Resolver<{ contents?: string; address?: string; name?: string; addressDetail?: string; remarks?: string; price?: number; tags?: string; lat?: number; lng?: number; }>' is not assignable to type 'Resolver<IItemFormProps, any>'.
Types of parameters 'values' and 'values' are incompatible.

작성한 yup 스키마와 useForm에 넘기는 인터페이스가 호환이 안되는 것 같았다.

❗️ 해결

🔗 https://yarnpkg.com/package?name=yup

yup 스키마는 정적 타입스크립트 인터페이스를 생성한다.
그 인터페이스를 추출하려면 InferType을 사용해라~

import type * as yup from "yup";

 type ItemData = yup.InferType<typeof ItemFormSchema>;
                               
  const { register, handleSubmit, formState, setValue, trigger } =
    useForm<ItemData>({
      resolver: yupResolver(ItemFormSchema),
      mode: "onSubmit",
    });

yup을 임포트해오고 작성한 스키마의 정적 타입스크립트 인터페이스를 추출해 ItemData라는 타입으로 만들었다. 그 인터페이스를 useForm에 적용하니 오류가 사라졌다.

interface IBoardFormProps {
  writer: string;
  password: string;
  title: string;
  contents: string;
  youtubeUrl: string;
  zipcode: string;
  address: string;
  addressDetail: string;
}


export const ItemFormSchema = yup.object({
  name: yup.string().required("상품이름을 입력해주세요."),
  remarks: yup.string().required("상품 정보를 요약해주세요."),
  contents: yup.string().required("상품 정보를 입력해주세요."),
  price: yup
    .number()
    .typeError("숫자만 입력가능합니다.")
    .required("상품 가격을 입력해주세요."),
  tags: yup.string(),
  lat: yup.number().typeError("숫자만 입력가능합니다."),
  lng: yup.number().typeError("숫자만 입력가능합니다."),
  address: yup.string(),
  addressDetail: yup.string(),
});

이 방식으로 작성할 땐 스키마에 들어가는 속성들을 기존에 사용하던 인터페이스와 동일하게 맞춰줘야한다.