Skip to content

[🐞] Props spreading (e.g. <input {...props} />) Typescript incompatibility #4946

Closed
@wsow4

Description

Which component is affected?

Qwik Runtime

Describe the bug

I'm trying to deal with props spreading so I can make the API of my components more flexible.

Example:

type Props = {
  text: string;
} & HTMLAttributes<HTMLButtonElement>

const MyButton = component$(({ text, ...props }: Props) => {
  return <button {...props}>{text}</button>
});

In React you can do something like this (repo: https://stackblitz.com/edit/react-ts-do296w?file=index.tsx):

type Props = {
  text: string;
} & ButtonHTMLAttributes<HTMLButtonElement>

but not in Qwik.

You can see in the reproduction playground that everything works in general, except Typescript throws some errors.

Reproduction

https://qwik.builder.io/playground/#v=1.1.5&f=Q040BmZm2FKNjoJHiK%2BPYwkwUIBVf2qxDqhoLXCDhiqIjTvSQAEBCQFwlWwADAPkhAVuQmCkrkxw7V2tp6cHlq8F%2BQKUvpBNMsRmkhWaS21AXLBy15xUUIazI8suI%2Bx2YYQClawzxmEdqNkBbAER8iJ5lprgt5QIv5JgLzjXgzWbQpKPLVgfSNhKQR1Unqkr1CioQxoQ6ly1CmrE%2Bx7FV6YovrJBstJOQwNmpQ6QhrkR6D7svgAptK0GkbXYfERC4Yme5aEZA1idlKbaqhuoI%2BVZaEqHShliSBnBpIwwpIxhUsYYUiYwKRMMKVOYlKk6xMdKoMhQgilDFByjpf2QLO0B

Steps to reproduce

  1. Go to the provided Qwik playground.
  2. Notice everything works as expected, but Typescript throws errors.

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 12.77 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.6

Additional Information

No response

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions