Example how to use form-actions

[Konstantin Nosov]

https://kit.svelte.dev/docs/form-actions

[Hofer Ivan]

Not sure what you mean / what you miss. The form actions docs already show the example using TypeScript.

[Konstantin Nosov]

I'm talking about this functionality:

use:enhance={({ form, data, action, cancel })

[Hofer Ivan]

But the enahnce function should already be typesafe. You get strongly typed arguments if you use it.

[Konstantin Nosov]

but there is data in it, which should contain pageResponce, and it's not typed.

    <form
      method="POST"
      action="/api/subscribe"
      use:enhance={({ form }) => {
        loading = true;

        return async ({ result }) => {
          errorText = '';
          if (result.type === 'failure') {
            errorText =
              result.data?.message;
          }
          loading = false;
          form.reset();
        };
      }}
    >

in example above result.data is not present in typings.

[Hofer Ivan]

Ah, now I see what you mean.
Unfortunately SvelteKit currently does not help us as much as it could. You need to manually type it like this:

Then you will get all the properties present on the data object.
But you can't distinguish between the types of a successful and a failed response.
You would need to manually type the Success and Invalid types.

This is something where SvelteKit could provide better type definitions in the future. I will open an issue there.

[Hofer Ivan]

see here: sveltejs/kit#7161

[Hofer Ivan]

And here is a PR: sveltejs/kit#9201.
Once merged, you don't need to manually pass the generics.

[Konstantin Nosov]

Thanks, it seems that it solves my issue for now. Unfortunately it was unclear from docs.

[Martin Ledl]

And here is a PR: sveltejs/kit#9201. Once merged, you don't need to manually pass the generics.

This PR does not affect the default behaviour of the ActionResult type rather that renaming Invalid to Failure, right?

[Hofer Ivan]

ActionResult stays the same. But you will be able to import a strongly typed SubmitFunction from ./$types.js