react-hook-form Controller를 이용하여 재사용 컴포넌트를 만들때 control props 전달 타입체커 환경 에러

에러 :Type 'Control<MyFormValues>' is not assignable to type 'Control<FieldValues>'

 

방법1 as unknown as 문법을 이용한 타입 단언

https://github.com/react-hook-form/react-hook-form/issues/4965#issuecomment-826862827

Type 'Control<MyFormValues>' is not assignable to type 'Control<FieldValues>' · Issue #4965 · react-hook-form/react-hook-form

 

방법2 제네릭을 이용한 props type 선언

https://github.com/react-hook-form/react-hook-form/issues/4965#issuecomment-1243612602

Type 'Control<MyFormValues>' is not assignable to type 'Control<FieldValues>' · Issue #4965 · react-hook-form/react-hook-form

 

방법2로 하는게 as unknwon으로 강제로 타입 단언 하는것보다 좋은것 같아서 방법2로 해결

 

// MentionField.tsx

import React, { FC } from 'react';
import { Mention, MentionsInput } from 'react-mentions';
import style from './MentionField.module.scss';
import { Control, Controller, Path, RegisterOptions } from 'react-hook-form';
import { MemberService } from '@/services/member/member.service';
import { useQuery } from 'react-query';

interface Props<T extends Record<string, any>> {
	control: Control<T>;
	fieldName: Path<T>;
	validationOptions?: Omit<
		RegisterOptions<T, Path<T>>,
		'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
	>;
}

const MentionField = <T extends Record<string, any>>(props: Props<T>) => {
	const { fieldName, control, validationOptions } = props;

	... 중략 ...
};

export default MentionField;


// 부모 컴포넌트
<MentionField
    control={control}	// good!
    fieldName="commentContents"
    validationOptions={{
        required: '필수입니다',
    }}
></MentionField>