You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If I were to define for two components MyComponent and MyComponentWrapper a Props interface extending from HTMLAttributes<'div'> for example, I can't forward props to MyComponent by spreading the props received by MyComponentWrapper, even tho they should be of the same type: I get the error "Type { .... } is not assignable to type 'IntrinsicAttributes & Props'. "
Error on local machine but not on StackBlitz example, please try it locally by using the example provided inside StackBlitz; I get the same error both on Windows (WSL) and MacOS:
Type '{ children: any; class: string; 'class:list'?: string | Record<string, boolean> | Record<any, any> | Iterable<string> | Iterable<any> | undefined; ... 187 more ...; onfullscreenerror?: string | ... 1 more ... | undefined; }' is not assignable to type 'IntrinsicAttributes & Props'.
Type '{ children: any; class: string; 'class:list'?: string | Record<string, boolean> | Record<any, any> | Iterable<string> | Iterable<any> | undefined; ... 187 more ...; onfullscreenerror?: string | ... 1 more ... | undefined; }' is not assignable to type 'IntrinsicAttributes'.ts(2322)
// this gives error, most likely because of the type difference of slot between IntrinsicAttributes and HTMLAttributes
---
interface Props extends HTMLAttributes<'html'>{};
const props = Astro.props;
---
<MyComponent {...props}>
...
// by guarding from slot equal to null the error goes away indeed
---
interface Props extends HTMLAttributes<'html'>{};
const props = Astro.props;
const slot = props.slot || undefined // type of slot is then string | undefined
---
<MyComponent {...props} slot={cleanedSlot}>
...
// or even like this, but this removes the slot prop altogether
---
interface Props extends HTMLAttributes<'html'>{};
const {slot, ...props} = Astro.props;
---
<MyComponent {...props}>
...
What's the expected result?
I would expect HTMLAttributes and IntrinsicAttributes to not have conflicting definitions, if I'm not missing something, else I would have to always type guard the slot attribute every time I extend from HTMLAttributes and pass props to another component whose Props interface also extends from HTMLAttributes
Though, I'm not sure if there was a specific reason for this to be of type string | undefined without null, while HTMLAttributes has all its attributes of type string | undefined | null.
You mean "to add null" to IntrinsicAttributesright? Since that's the one type missing (because slot is defined using ?) ^-^''
But yes, I will send the PR later today! (I'll take some time to read the "how-to" first though ^^)
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
astroHTML.JSX.IntrinsicAttributes and HTMLAttributes conflicting type definitions (I found one at least):
If I were to define for two components
MyComponent
andMyComponentWrapper
a Props interface extending from HTMLAttributes<'div'> for example, I can't forward props toMyComponent
by spreading the props received by MyComponentWrapper, even tho they should be of the same type: I get the error "Type { .... } is not assignable to type 'IntrinsicAttributes & Props'. "Error on local machine but not on StackBlitz example, please try it locally by using the example provided inside StackBlitz; I get the same error both on Windows (WSL) and MacOS:
What's the expected result?
I would expect HTMLAttributes and IntrinsicAttributes to not have conflicting definitions, if I'm not missing something, else I would have to always type guard the slot attribute every time I extend from HTMLAttributes and pass props to another component whose Props interface also extends from HTMLAttributes
Link to Minimal Reproducible Example
https://stackblitz.com/edit/withastro-astro-qnckaa?file=src%2Flayouts%2FDivWrapper.astro
Participation
The text was updated successfully, but these errors were encountered: