Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Control flow breaks inside event handler lambda functions - intended or not? #876

Open
dummdidumm opened this issue Mar 12, 2021 · 3 comments
Labels
question Further information is requested

Comments

@dummdidumm
Copy link
Member

Control flow for TypeScript now should work correctly almost everywhere. One exception are event handlers when they use lambda functions.

To Reproduce

<script lang="ts">
  let value: string | null = null;

  function acceptsString(value: string) {
    console.log(value);
  }
</script>

{#if value}
  <!-- Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'. -->
  <button on:click={() => acceptsString(value)} />
{/if}

Expected behavior
Now the question is: Is this a bug or standard TypeScript behavior?

One could argue it's a bug because one never gets to the click handler if the value is null.

One could also argue it's standard TypeScript behavior because the following React snippet will also yell at you:

function Component() {
    let value: string | null = null;

    function acceptsString(value: string) {
        console.log(value);
    }

    return value && <p onClick={() => acceptsString(value)}>
        Start editing to see some magic happen :)
    </p>;
}

The reason is that TypeScript does not know when that lambda-function is invoked, so it cannot say for sure that value has not changed in the meantime because it's not a const.

Thoughts on this welcome!

System (please complete the following information):
Svelte for VS Code 104.6.4 / svelte-check svelte-check-1.2.5

@dummdidumm dummdidumm added bug Something isn't working question Further information is requested and removed bug Something isn't working labels Mar 12, 2021
@pushkine
Copy link
Contributor

The svelte syntax mimics if statements rather than conditionals
So if if (value) in Typescript narrows the type correctly, {#if value} should too

@Buraburaite
Copy link

One could argue it's a bug because one never gets to the click handler if the value is null.

I would agree. I am making a component that morphs based on the type of the provided variable, and I really expected that this would work.

Not my preference, but allowing for some kind of // @ts-ignore or as any would have been sufficient in my use case.

@dummdidumm
Copy link
Member Author

dummdidumm commented Sep 22, 2022

#1657 and #1891 were opened with the same underlying reason, seeing it as a bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants