Interface $$Events is labeled as unused but necessary for Typescript

[justingolden21]

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.56.0

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

^2.35.1

What did you do?

Configuration

module.exports = {
	root: true,
	parser: '@typescript-eslint/parser',
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:svelte/recommended',
		'prettier'
	],
	plugins: ['prettier', '@typescript-eslint'],
	ignorePatterns: ['*.cjs'],
	parserOptions: {
		sourceType: 'module',
		ecmaVersion: 2022
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	},
	globals: {
		gtag: true,
		__version__: true
	},
	overrides: [
		{
			files: ['*.svelte'], // Apply these settings to Svelte files
			parser: 'svelte-eslint-parser', // Use the Svelte parser for .svelte files
			parserOptions: {
				parser: '@typescript-eslint/parser' // Use TypeScript parser for inside <script> blocks
			}
		}
	],
	rules: {
		'prettier/prettier': 'error',
		'quotes': ['warn', 'single', { avoidEscape: true }],
		'no-console': 'off',
		'no-tabs': 'off',
		'no-restricted-syntax': 'off',
		'func-names': 'off',
		'quote-props': ['error', 'consistent-as-needed'],
		'guard-for-in': 'off',
		'import/extensions': 'off',
		'new-cap': 'off',
		'import/no-extraneous-dependencies': 'off',
		'no-param-reassign': 'off',
		'radix': 'off',
		'@typescript-eslint/no-inferrable-types': 'off',
		'prefer-const': 'error',
		'svelte/no-at-html-tags': 'off',

		// Not designed to work with typescript; turned off in favor of typescript-eslint rules
		'no-undef': 'off',
		'no-unused-vars': 'off',

		// Unused vars must start with `_`
		'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],

		// TODO: remove below
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/ban-ts-comment': 'off'
	}
};

<script lang="ts">
	import type { ChangeEventHandler } from 'svelte/elements';

	// Necessary because we forward the `on:change` event
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	interface $$Events {
		change: Parameters<ChangeEventHandler<HTMLInputElement>>[0];
	}
	export let checked: null | boolean = false;
	export let id: string;
	export let labelText: string;
</script>

<div>
	<div>
		<input bind:checked type="checkbox" {id} on:change />
		<label for={id} class="toggle-bg" />
	</div>
	<label for={id}>
		{labelText}
	</label>
</div>

What did you expect to happen?

This should not be an error since $$Events is necessary for on:change and otherwise I get errors from Typescript and when running check:

svelte-check --tsconfig ./tsconfig.json

Error: Property 'checked' does not exist on type 'EventTarget'. (ts)
                                on:change={(e) => {
                                        if (e.currentTarget.checked) {

What actually happened?

Toggle.svelte
5:12 error '$$Events' is defined but never used @typescript-eslint/no-unused-vars

Link to GitHub Repo with Minimal Reproducible Example

https://eslint-online-playground.netlify.app/#eNplU8tu2zAQ/JUFEcCX2OrZlY0AbYAUSIsCzS0KEFpc23QoUiUpx4Gqf+/yEdlKDnqQuzOc3R32zNm6wBNvWoULd0TlkS1Z6WorWw+Ka7FbVcy7iq0rDSCb1lgP3ux2CmFrTQOztMjg2ddKK/RQ77F+QQEr2HLlkHbLIpESDy0eIihSinBAWrKwsZFaLDN+1eefIUQU36B6wJNf9bNEMBugWLPrWMVEx7SIcw2WTvfvVby1CD1821MC3h5R+zuqV6GFIZeWuApU2FDUUXEBHzmKAn5hjc5x+wYbrHnnEF6pJ8a+civA7xGejaZCAvszYOAfobd/7qX2IAw6PfPwos0rIbgPDBqpb34vXeCKIlMhIxidIvBcSMc3CueaGjKnHYSbc/I8JRXazDtN0sT8yK3L5WuPdstrhKurWLaDPkUqn+Qu4Te3vEHKc+Xn/pR3Dz/vf+i287epM+v145en1Bw/pA+eYo8vvLAE3SkF/2BjjEKuz974CJCU67yVevc5NnpgknI2Vx5QKeQxT/vilxYyyJ54LLaYDBKXG3OqGPRSDDAOjyw2wuPxYTCrmPMeKYuL86Y5I7YfpecWlUXciQkXBPSQo9P8FrXRW7lbHBwZOtv2QMYI7qzYTR7ygaxNNyx3SeCWd8rDY7gyB5cp3MJibRqalkBxHUJ9eAHYTqFbvq8A/nbGh43HiqG1xlbsmo4SpiOvVewpQgGG+A1vmnvQ2/L6he+QlBpNWiMdXTpqbcWW9NcYQQcRWQoIPH7HNojRtUTSPyqYlhWgipMgn6EhIcWnwSin0gMb/gOIOLht

Additional comments

Thank you in advance

[justingolden21]

Wanted to mention I did try upgrading and same thing.

"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.1.2",
"eslint-plugin-svelte": "^2.43.0",

[justingolden21]

Likely unrelated, but another "unused" thing:

const [_, month, day] = date.split('-').map(Number);

error '_' is assigned a value but never used @typescript-eslint/no-unused-vars

[karbica]

Likely unrelated, but another "unused" thing:
const [, month, day] = date.split('-').map(Number);
error '' is assigned a value but never used @typescript-eslint/no-unused-vars

I think this is unrelated. The responsibility doesn't fall on this plugin to determine what unused _ tokens should signal to the ESLint engine.

I usually have to set up a set of rules to configure what you are expecting. I followed this configuration.

[ota-meshi]

Thank you for posting issue.

The RFC about $$Events don't seem to have been merged yet.
sveltejs/rfcs#38
I don't want to fully support it yet to avoid a lot of breaking changes.
If you want to support it, we can add it as an experimental feature. Please consider opening a PR.

[mikededo]

@justingolden21, since it is a linter warning and not an error with the framework itself, I recommend you disable the @typescrip-eslint/no-unused-vars for such patterns (including also the underscore _, which you need to let @typescript-eslint know that it is not an error):

// In your eslint config, add the following rule

  // ...
  '@typescript-eslint/no-unused-vars': [
    'error',
    {
      argsIgnorePattern: '^(_|\\$\\$Props|\\$\\$Events)',
      varsIgnorePattern: '^(_|\\$\\$Props|\\$\\$Events)',
      caughtErrorsIgnorePattern: '^_'
    }
  ],
  // ...

Another more "scalable" solution would be:

// You can add more patterns on demand here...
const patterns = ['_', '\\$\\$Props', '\\$\\$Events'];

// In your eslint config, add the following rule

  // ...
  '@typescript-eslint/no-unused-vars': [
    'error',
    {
      argsIgnorePattern: `^(${patterns.join('|')})`,
      varsIgnorePattern: `^(${patterns.join('|')})`,
      caughtErrorsIgnorePattern: '^_'
    }
  ],
  // ...

The @typescript-eslint basically extends the eslint options from here

[marekdedic]

Duplicate of #348 I think. Anyway, events are deprecated as of Svelte 5, so maybe it's not worth fixing this?