TypeScript: Autocomplete shows more options than a component has

[cintek]

Using v0.46.20 my IDE shows more options for components than they should have. Here an example for Radio:

The cause is that $$Props in src/lib/forms/Radio.svelte is extending HTMLInputAttributes:
interface $$Props extends HTMLInputAttributes {

The problem is that a radio input doesn't have such attributes like max or maxLength and if the IDE makes wrong suggestions you would always have to look into documentation to be sure that a component really has an attribute.

I suggest to define $$Props like this (again an example for Radio):

interface $$Props {
    color?: FormColorType;
    custom?: boolean;
    inline?: boolean;
    group?: number | string | undefined;
    value?: number | string;
    spacing?: string;
    checked?: HTMLInputAttributes["checked"];
  }

So, don't extend HTMLInputAttributes but map the props to the attributes of HTMLInputAttributes. Yes, this is more work for you maintainers of flowbite-svelte but it makes using your library easier.

[shinokada]

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio:

Additional attributes
In addition to the common attributes shared by all elements, radio inputs support the following attributes.

Please note that "the common attributes shared by all input elements". Some users may be using attributes that you may not be using. By extending it you can use required, name, tabindex, accesskey, etc.

By doing extending it, you won't get any error when you run pnpm check.

So extends is intentional and removing is against the enhancement.

[cintek]

In addition to the common attributes shared by all elements, radio inputs support the following attributes.

When you take a look at the attributes of input you can find the following sentence:

Attributes for the element include the global HTML attributes and additionally:

Below the sentence you find a table including these rows:

So, from what I understand e.g. a radio input has the global attributes and the ones in the table where type is radio. In this case maxLength doesn't belong to the attributes of a radio input.

[shinokada]

That's right. But svelte doesn't provide specific types for radio, checkbox etc. They belong to HTMLInputAttributes.

[cintek]

That's right. But svelte doesn't provide specific types for radio, checkbox etc. They belong to HTMLInputAttributes.

Sadly, that's true. I created an issue in the svelte repo: sveltejs/svelte#13447. Maybe they will add some types.

[FredoMartini]

Hello,

Another solution would be to use Omit<> to remove the extra attributes.

For example for radio :

interface $$Props extends Omit<HTMLInputAttributes,
    'accept' | 'alt' | 'autocapitalize' | 'autocomplete' | 'capture' |
    'dirname' | 'formaction' | 'formenctype' | 'formmethod' |
    'formnovalidate' | 'formtarget' | height' | 'max' | 'maxlength' |
    'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' |
    'popovertarget' | 'popovertargetaction' | 'readonly' | 
    'size' | 'src' | 'step' | 'width'> {