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.

Sign up for GitHub

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

Jump to bottom

Svelte reports incorrect types for the buffered binding on media elements #7342

Open
illright opened this issue Mar 5, 2022 · 2 comments
Open

Svelte reports incorrect types for the buffered binding on media elements #7342

illright opened this issue Mar 5, 2022 · 2 comments
Labels
media elements

Comments

@illright
Copy link

illright commented Mar 5, 2022 •
edited
Loading

Describe the bug

When you bind to the buffered property of an <audio> element, for instance, the value that comes from this property has the type Array<{ start: number; end: number; }>. If you use that type on a bound variable, however, svelte-check will report its incompatibility with TimeRanges, which is what the type of this property should be.

<script lang="ts">
  let buffered: Array<{ start: number; end: number; }>;  // Type error!
</script>

<audio bind:buffered />
Opinion on these types

In my opinion, this conversion from TimeRanges to a custom type is unjustified. Yes, TimeRanges is ridiculous, but it's standardized. Learning to operate this new type (the documentation of which is buried deep within the tutorial) is an unpleasant experience by itself. In this regard, I really like the approach of the Remix web framework that goes to great lengths to ensure transferability of knowledge. This type conversion is one of the few examples where knowledge of Svelte is not tranferable, and in my opinion it trumps the convenience of writing a for .. of loop instead of an index-based one.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-8p9wht?file=src/routes/index.svelte

Logs

Error: Type 'TimeRanges' is missing the following properties from type '{ start: number; end: number; }[]': pop, push, concat, join, and 28 more. (ts)

System Info

StackBlitz doesn't play well with `envinfo`, but it's a fresh install, so all the versions are the latest

Severity

annoyance
@davidfrp
Copy link

I too experience this same issue with the <video> element and its buffered property.

@anito
Copy link

anito commented Mar 18, 2023

Same here. It's easy to work around it, the extra line is yet annoying. I created this REPL https://svelte.dev/repl/38429f4787f04e6ea4ebf2246becd289?version=3.57.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
media elements
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@anito @Rich-Harris @davidfrp @illright