[Bug] cannot use strict typescript types

[RSWilli]

Describe the bug

When i set strict: true in my tsconfig.json I get the following error in every stories file:

Argument of type 'typeof Story' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<StoryProps>) => Story' is not assignable to type 'new (args: { target: any; props?: any; }) => ATypedSvelteComponent'.
      Construct signature return types 'Story' and 'ATypedSvelteComponent' are incompatible.
        The types of '$on' are incompatible between these types.
          Type '<K extends never>(type: K, callback: (e: {}[K]) => void) => () => void' is not assignable to type '(event: string, handler: ((e: any) => any) | null | undefined) => () => void'.
            Types of parameters 'callback' and 'handler' are incompatible.
              Type '((e: any) => any) | null | undefined' is not assignable to type '(e: never) => void'.
                Type 'undefined' is not assignable to type '(e: never) => void'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2345)

Steps to reproduce the behavior

1. add strict: true in tsconfig.json

Expected behavior

no error

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

  System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 6.15 GB / 31.22 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Chromium: 106.0.5249.103
    Firefox: 105.0.3
  npmPackages:
    @storybook/addon-svelte-csf: ^2.0.8 => 2.0.8 
    @storybook/svelte: ^6.5.10 => 6.5.10 
    @sveltejs/package: ^1.0.0-next.1 => 1.0.0-next.1 
    @sveltejs/vite-plugin-svelte: ^1.0.1 => 1.0.1 
    svelte: ^3.49.0 => 3.49.0 
    typescript: ^4.6.4 => 4.7.4 
    vite: ^3.0.7 => 3.0.9

Additional context

The Problem lies in the types file, although I cannot figure out what it needs to be changed to

[RSWilli]

I played around a bit more, and I got the following to work:

// any of those work:
export class Story extends SvelteComponentTyped<StoryProps> { }
export declare const Story: ComponentType<SvelteComponentTyped<StoryProps>>
export class Story extends SvelteComponentTyped<StoryProps, any, Slots> { }
export declare const Story: ComponentType<SvelteComponentTyped<StoryProps, any, Slots>>

// any of those don't:
export class Story extends SvelteComponentTyped<StoryProps, {}, Slots> { }
export declare const Story: ComponentType<SvelteComponentTyped<StoryProps, {}, Slots>>
export declare const Story: ComponentType<SvelteComponentTyped<StoryProps, {}>>
export class Story extends SvelteComponentTyped<StoryProps, {}> { }

Looks like an easy fix, but I don't understand why the empty Object is not enough to satisfy the types. If approved I can create a pull request tomorrow

[RSWilli]

I haven't tested <Template>, which uses the same empty object for events. It may also crash on strict types.

[madeleineostoja]

Also seeing this, would be great to get a PR going because my stories are a sea of red squiggles atm

[RSWilli]

@madeleineostoja the PR is #74 , until it is merged, I patched my project's types via declares in my app.d.ts

[JReinhold]

Fixed in #74