Type checking does not carry across spreading `...$$restProps`
See original GitHub issueDescribe the bug
If a component A
spreads its $$restProps
to some child component B
, and B
has some typed prop foo
, then any foo
which is passed to A
should be checked against the type specified in B
. For example, if B
specifies that foo
is a string, then <A foo={console.log}>
should give a type error. Right now it does not.
For that matter, you can also just pass invalid props to A
which don’t actually exist on A
or B
, and no error will be thrown.
I can imagine why this could get complicated, but it’d still be really nice if it worked. I ran into this trying to make some TypeScript improvements in svelte-headlessui
To Reproduce I created a repo for ease of illustration: https://github.com/rgossiaux/svelte-prop-spread-ts
Expected behavior See repo
Screenshots N/A
System (please complete the following information):
- Plugin/Package:
svelte-check
v2.4.1
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top GitHub Comments
After poking around the svelte2tsx code a little bit, maybe I understand better. You’re worried about dynamic access, like
$$restProps[someVar]
, right? So we’re talking about dynamic behavior within the component itself.However going back to:
I’m still not sure that’s true. On the balance that’s probably true for
$$props
, but I think the idea of$$restProps
is generally to spread it to some child component. In fact I’m not sure there’s many other reasons why you would use it; for some dynamic behavior stuff you’d likely just use$$props
. So I do think that this problem could be solved statically for the normal cases.However I would also believe you if you said that this was far too complicated to add (I don’t really know) and that I need to just convert all my components over to
$$Props
to add this typing myself.Hmm not sure I understand. What’s an example of this?
I don’t see any reason in principle why the example repo I linked could not be typed better. The
<Child>
component hasThe
<Parent>
component simply passes through all its props to<Child>
, so it should be typed the same way, but instead it has:It doesn’t matter what circumstances either of these two components are used in, you only have to analyze the components themselves to type them properly.