question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type checking does not carry across spreading `...$$restProps`

See original GitHub issue

Describe 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:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
rgossiauxcommented, Feb 1, 2022

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:

The whole idea of $$restProps is to allow dynamic behavior at runtime

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.

1reaction
rgossiauxcommented, Feb 1, 2022

The whole idea of $$restProps is to allow dynamic behavior at runtime, which can’t be statically analysed and therefore can’t be typed.

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 has

    props: {
        name?: string;
    };

The <Parent> component simply passes through all its props to <Child>, so it should be typed the same way, but instead it has:

    props: {
        [x: string]: any;
    };

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript workaround for rest props in React - Stack Overflow
TypeScript 2.1 now supports object spread/rest, so no workarounds are needed anymore! Original Question. TypeScript supports JSX spread ...
Read more >
typing rest/spread props in react components : r/typescript
This is the type error I'm getting : Type '{ position: [number, number, number]; scale: number[]; }' is not assignable to type '{...
Read more >
Typing Svelte Component Props/Events/Slots [Feedback ...
At the moment it is not possible to type the inputs/outputs of a ... solution to type checking components I've come across in...
Read more >
Svelte Tutorial for Beginners - $$props and $$restProps
There are times you can 't define enough props and you want to get all the props passed to the component, well, here...
Read more >
Why I stopped spreading props on React Components
Looking at the latest example makes the case for using a type checker, to help flag non-existing props. Actually introducing type definitions on ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found