Typescript useWatch compile error

[tommiCZE]

Hi,
I am migrating my project to TypeScript but I got stuck on an error related to useWatch. I create example at codesandbox.

Problem is in file MyInputComponent.tsx at line 12.

(property) name: string[]
No overload matches this call.
Overload 2 of 4, '(props: { name: Path; defaultValue?: PathValue<T, Path> | undefined; control?: Control<T, object> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }): PathValue<...>', gave the following error.
Type 'string[]' is not assignable to type 'Path'.ts(2769)
useWatch.d.ts(9, 5): The expected type comes from property 'name' which is declared here on type '{ name: Path; defaultValue?: PathValue<T, Path> | undefined; control?: Control<T, object> | undefined; disabled?: boolean | undefined; exact?: boolean | undefined; }'

I have tried various modifying of the generic type when calling u usewatch but without success. any idea where the problem might be?

[felixschorer]

That's currently not possible without type assertions. #7354 would enable you to do that. Until then you'll have to use type assertions.

https://codesandbox.io/s/zen-chaplygin-s6yov?file=/src/MyInputComponent.tsx

[tommiCZE]

@felixschorer
You solved my problem thanks a lot

[felixschorer]

Hm, actually #7354 won't resolve that. At least not in its current form.

[martin-wahlberg]

You can make it work without assertions by doing it this way:
https://codesandbox.io/s/react-hook-from-usewatch-forked-ittvj8?file=/src/index.tsx