typescriptlaravelvue.jsinertiajslaravel-breeze

Inertia.js & Typescript: Argument type {} & InertiaFormProps{} is not assignable to parameter type Partial<VisitOptions> | undefined


I created an empty Laravel project and installed Laravel Breeze with Typescript support.

Now when I create a form (with useForm()) and I use the .post() method and I use one of the options (e.g. onFinish: () =>) I get the following error:

Argument type {onFinish: () => {password: string, password_confirmation: string, name: string, email: string} & InertiaFormProps<{password: string, password_confirmation: string, name: string, email: string}>} is not assignable to parameter type Partial | undefined

enter image description here

When I hover it in my editor it suggests to add all the members. Does this has something to do with Typescript or am I doing something wrong?


Solution

  • You need to call the arrow function with a {} so it's of the form functionName: () => {...}. Your code is of the form functionName: () => ...

    In your code, change onFinish to

    onFinish() => {   //note the curly here 
         form.reset(...)
    }
    

    My understanding is that if you omit the {} then the arrow function has a concise body, which consists solely of a single expression whose result will implicitly become the return value of the function, and this return value may be causing the issue.

    But, tbh, I'm not sure why yours doesn't work but the {} does.