`exactOptionalPropertyTypes` type issues

[macmillen]

Describe the bug
When the exactOptionalPropertyTypes flag is set to true in tsconfig.json I get errors when passing values to HTML elements which are possibly undefined which (presumably) shouldn't be happening.

To Reproduce
Steps to reproduce the behavior:

1. Example:

<button on:click>Button</button>

Type 'undefined' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.ts(2322)
(JSX attribute) svelte.JSX.DOMAttributes<HTMLButtonElement>.onclick?: svelte.JSX.MouseEventHandler<HTMLButtonElement>

2. Example

<script lang="ts">
  let placeholder: string | undefined;
</script>

<input {placeholder} />

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2322)

Expected behavior
All HTML properties should accept an undefined value. (?)

Screenshots

System (please complete the following information):

• OS: Linux
• IDE: VSCode
• Plugin/Package: Svelte for VSCode

[dummdidumm]

Svelte will treat undefined as "remove that attribute", so yeah, all attributes should have the undefined value. Event listeners is a different thing, in this case the transformation probably needs to be adjusted. I'm hesitant to allow undefined as an event listener. It's technically possible though.

[macmillen]

@dummdidumm, thanks for the fix! The error messages for the event listeners are still a problem though. Should we leave this issue open or create a new one?

[dummdidumm]

Oh I thought that's fixed, too, I'll reopen an look into it (I assume you mean the forwarded events).

[macmillen]

Yes I meant the forwarded events. It seems in VSCode the errors don't show up anymore but when running svelte-check i still get this for example:

Error: Type 'undefined' is not assignable to type 'FocusEventHandler<HTMLTextAreaElement>'. (ts)

---

And there is also a problem with transitions when the function can be undefined. In the following snippet you can see that the crossfade function returns the send and receive transition functions which can be undefined which results in an error.

It would be nice to be able to pass undefined because then you could pass down optional transitions as component props as well for example if you not always want to have a transition for a specific component.

<script lang="ts">
  import { crossfade } from "svelte/transition";

  const [send, receive] = crossfade({ duration: 400 });
</script>

<div
  in:receive={{ key }}
  out:send={{ key }}
/>

Cannot invoke an object which is possibly 'undefined'.ts(2722)

[dummdidumm]

The error was still present with svelte-check because there was no release of it. I now published another one which should fix this.

About the events: This is correct as of now because Svelte does not check if transitions/actions are defined and instead assumes they are, which results in a runtime error if they are not. The types are therefore correct. If you want this to be adjusted, please file an issue in the Svelte core repository.