Svelte use typing error in VS Code

[phocks]

I'm getting:

Argument of type 'SvelteAction | SubGestureFunctions' is not assignable to parameter of type '__sveltets_2_SvelteActionReturnType'.
  Type 'SubGestureFunctions' is not assignable to type '__sveltets_2_SvelteActionReturnType'.ts(2345)

I've included the global.d.ts in my src dir and am still getting it. Can anyone help?

[Rezi]

Hi, thanks for reporting. I have been able to reproduce and see it is only insufficient type handling (there is additional return type possible for need of composed gestures and svelte does not like the union type). Will see if I can handle it with some conditional types. In meantime please ignore it, it should not break your build. Also the global.d.ts is perhaps not needed in new sveltekit and new language tools, will check that as well.

[phocks]

Thanks a lot. At the moment I'm hiding the error using this slightly hacky method:

import { pan as untypedPan, pinch as untypedPinch } from "svelte-gestures";
const pan: any = untypedPan;
const pinch: any = untypedPinch;

[Rezi]

Should be fixed in v 1.5.1, you need to update the version and then restart your VS code. Unfortunately the fix only works when supplying parameters. So if you don't want to pass any custom params you just need to pass empty object like use:pan={{}} Looks like the issue when not passing any params is now on Svelte team side.. Will need to contact them and see what is possible

[Rezi]

I have been able to fix even the issue when there are no parameters provided in template.. no need for use:pan={{}} hack.. just use use:pan if no params are provided. Update to 1.5.2

[phocks]

Thanks. I tried earlier today and it seemed to work for use:pan but not for use:pinch but I will have another go tomorrow.

[Rezi]

Will check all the gestures myself and if there is still an issue, fix it .. perhaps I just missed the type fix for some of the gestures

[moonlitgrace]

Hi, thanks for this project. I've same issue with swipe and just tried with some other events ( still getting type errors ).

use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: "pan-y" }}

And also I've issue with pan version using: ^1.5.2

[Rezi]

Sorry guys I am no longer able to replicate it I tried pan, pinch and swipe an no more type errors in my VS code. Perhaps try to update typescript in your project. You also need to either close and restart all your VS code instances or restart svelte language server. And for sure you need to have Svelte for VS code plugin active. If you still have this kind of errors after that, please make a screenshot and paste it here.. perhaps I just don't understand what the issue is exactly

[phocks]

Thanks again. I've updated to the latest 1.5.2 and restarted VS Code and all seems to be working well. Cheers and well done on the excellent project. 🎉

[andrii-kryvoviaz]

I am having a similar issue but with on:<gesture>. In Svelte 4, you now need to provide types for Actions. I've made some adjustments to @phocks's solution, but it still doesn't feel quite right.

const press: Action<
    HTMLElement,
    ParametersSwitch<PressParameters>,
    {
      'on:press': (
        e: CustomEvent<{
          x: number;
          y: number;
          target: HTMLElement;
          pointerType: string;
        }>
      ) => void;
    }
  > = untypedPress as any;

or to make it more reusable as a temporary fix:

 import type { ParametersSwitch } from 'svelte-gestures';
import type { Action } from 'svelte/action';

type Gesture<T, E> = Action<
  HTMLElement,
  ParametersSwitch<T>,
  { [name: string]: (event: CustomEvent<E>) => void }
>;

export function wrapAction<T, E>(action: any): Gesture<T, E> {
  return action as Gesture<T, E>;
}

and then use it elsewhere:

type PressEvent = {
    x: number;
    y: number;
    target: HTMLElement;
    pointerType: string;
  };

const press = wrapAction<PressParameters, PressEvent>(untypedPress);