`CustomEvent`s are treated as `any`

[DetachHead]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.33.0

What version of eslint-plugin-svelte are you using?

2.25.0

What did you do?

Configuration

module.exports = {
    extends: ["plugin:svelte/recommended", "plugin:@typescript-eslint/recommended"],
    parser: "@typescript-eslint/parser",
    parserOptions: {
      project: "tsconfig.json",
      extraFileExtensions: [".svelte"],
    },
    rules:{
        "@typescript-eslint/no-unsafe-member-access": "error"
    },
    overrides: [
      {
        files: ["*.svelte"],
        parser: "svelte-eslint-parser",
        parserOptions: {
          parser: "@typescript-eslint/parser",
        },
      },
    ],
  }

asdf.svelte

<script lang="ts" strictEvents>
    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher<{ value: number }>()
    dispatch('value', 1)
</script>

main.svelte

<script lang="ts" strictEvents>
    import Asdf from './asdf.svelte'
</script>

<Asdf
    on:value={(e) => {
        e.detail.toString()
    }}
/>

What did you expect to happen?

no error, as e.detail is number, not any

What actually happened?

7:9  error  Unsafe member access .toString on an `any` value  @typescript-eslint/no-unsafe-member-access

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/DetachHead/eslint-plugin-svelte-repros/tree/3a6151d1f80aacf9246db66758276bb8869f0721

Additional comments

related: #390

the issue was fixed for events with currentTarget, but not for CustomEvents

[ota-meshi]

Thank you for posting the issue.

However, I still don't know how to solve it.

Plain typescript and typescript-eslint/parser parsers don't try to access ./asdf.svelte with import Asdf from './asdf.svelte'.
Although it tries to access ./asdf.svelte.ts, ./asdf.d.svelte.ts, ./asdf.svelte.d.ts, ./asdf.svelte.js etc. , Asdf is always assigned the type of any because they are not found.

So now it's better to assign CustomEvent<any> to the event argument instead of having the listener function itself be any.

https://github.com/sveltejs/svelte-eslint-parser/blob/28619f14739dfa7a27f0891ff9f7b9ae24bff35f/src/parser/converts/attr.ts#L369

Also related to issue #298.

Combining with the experimental parser typescript-eslint-parser-for-extra-files and modifying svelte-eslint-parser may solve it, but I haven't tried it yet.
https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files

[ota-meshi]

FYI, I changed the parser to only improve type definitions when using typescript-eslint-parser-for-extra-files.

[Qusic]

it seems that svelte-check can correctly check event type errors in on: directives. my current workaround is simply to disable @typescript-eslint/no-unsafe-* eslint rules for .svelte files and use svelte-check instead.

[ota-meshi]

Did you use typescript-eslint-parser-for-extra-files? Please provide a reproduction repo if you use it. If not, please don't send spam.

[baseballyama]

Svelte5 doesn't need to use createEventDispatcher, so please upgrade your app to Svelte5.