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.
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
Spread syntax into component that uses HTMLAttributes throws a TypeScript error #10780
Comments
I can reproduce this issue (by downloading the stackblitz project locally). I'm not sure what's going on either, maybe @Princesseuh will know more |
I have the same issue with an Input component in the below example. ---
// atoms/input.astro
import type { HTMLAttributes } from 'astro/types';
export interface Props
extends Omit<HTMLAttributes<'input'>, 'id' | 'name' | 'class'> {
id?: string;
name: string;
}
const { name, id, ...inputProps } = Astro.props;
const componentId = id || name;
---
<input
id={componentId}
class="placeholder:text-cello-900/60 w-full rounded-lg border border-cello-300 bg-cello-50 p-4 text-base"
{...inputProps}
/> ---
// moleculres/labeledInput.astro
import type { ComponentProps } from 'astro/types';
import Input from '../atoms/input.astro';
type InputProps = ComponentProps<typeof Input>;
type Props = InputProps & {
label: string;
};
const { label, name, id, ...inputProps } = Astro.props;
const componentId = id || name;
---
<label
for={componentId}
class="block pb-1 text-xl font-normal leading-8 text-cello-900">{label}</label
>
<Input id={componentId} {...inputProps} /> |
The issue here I'm pretty sure is that |
I have a similar issue with Typescript using
If I use
From my experience, the culprit is always type Props = {
links: Omit<ComponentProps<typeof MyLink>, 'slot'>[]
} |
Astro Info
If this issue only occurs in one browser, which browser is a problem?
All browsers
Describe the Bug
Using the spread syntax on a component with a type that uses HTMLAttributes throws a TypeScript error.
For example, consider the following component, MyLink.astro:
Next, we'll consume that component in another component, MyComponent.astro:
When you use
<MyComponent>
in, say, a page file and runastro check
, TypeScript throws the following error:Removing either the spread syntax or swapping the
HTMLAttributes<'a'>
in favor of a more explicit type removes the error. My guess is becauseHTMLAttributes
consumes a type that some information is lost and it's tripping up TS. If I could somehow do something likeimport type { HTMLAnchorAttributes } from 'astro/types'
as seen here then that might solve the issue? That being said, I'm new to TypeScript so there could very well be something I'm missing.If you open the minimal reproducible example link I've provided and run
astro check
, you'll see the same error.What's the expected result?
I feel like this shouldn't throw an error. In my project, the data is all flowing through an object that generates components and the spread syntax is invaluable. I'm finding it impossible to create components the also accept a
class
or similar attributes.Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-fffdsv-s7i8nl?file=src%2Fpages%2Findex.astro&file=src%2Fcomponents%2FMyComponent.astro&file=src%2Fcomponents%2FMyLink.astro
Participation
The text was updated successfully, but these errors were encountered: