useSvelteEventDispatcherTypes (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useSvelteEventDispatcherTypes
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/require-event-dispatcher-types

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteEventDispatcherTypes": "error"
6
      }
7
    }
8
  }
9
}

Description

Require createEventDispatcher calls to declare the types of their events.

createEventDispatcher returns a function that a Svelte component uses to send events to its parent. In TypeScript, the events are described between angle brackets: createEventDispatcher<{ save: string }>() declares one event named save that carries a string.

When that description is missing, TypeScript accepts any event name with any data. A misspelled event name or the wrong kind of data is not reported, and the parent component doesn’t know what its event handlers receive.

This rule only checks Svelte components whose script uses TypeScript (<script lang="ts">), and only calls to the createEventDispatcher function imported from svelte.

createEventDispatcher is how components send events in Svelte 3 and Svelte 4. Svelte 5 deprecates it: there, a component receives functions from its parent and calls them instead of sending events.

Examples

Invalid

1
<script lang="ts">
2
import { createEventDispatcher } from "svelte";
3

4
const dispatch = createEventDispatcher();
5
</script>

code-block.svelte:4:18 lint/nursery/useSvelteEventDispatcherTypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This createEventDispatcher call doesn't declare the types of its events.
  
    2 │ import { createEventDispatcher } from "svelte";
    3 │ 
  > 4 │ const dispatch = createEventDispatcher();
      │                  ^^^^^^^^^^^^^^^^^^^^^^^
    5 │ </script>
    6 │ 
  
  ℹ Without them, TypeScript accepts any event name with any data, so mistakes in the events this component sends aren't reported.
  
  ℹ Describe the events between angle brackets, for example createEventDispatcher<{ save: string }>().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script lang="ts">
2
import { createEventDispatcher } from "svelte";
3

4
const dispatch = createEventDispatcher<{ save: string; close: null }>();
5
</script>

References

Svelte createEventDispatcher