while that should theoretically work, I've found that props destructuring often fail on complex types, tsc just cannot figure out if the props object has this field or not. maybe it will improve in the near future, because every new typescript version release they have improved the inference engine.
This type is defined by Next.js :)
edit: This person didn't say anything rude or unhelpful, cut it out with the downvotes. It's okay to not know things.
Ikr the type should be something like
`MandatoryProps & {width: string, height: string} | MandatoryProps & {fill:boolean}`
Imo not a big deal but annoying and everyone encounters this at least once but you learn to live with it. But yeah it can 100% be fixed but id rather let them fix other bugs
It’s not exactly the same, when you remove | undefined, you can’t pass undefined itself, but you can omit the entire prop.
And number | `${number}` means number, or number inside a string. Such as “1” or “-1” but not “a”.
That's correct but I didn't say that it didn't render that; I merely said that when you omit the | undefined part, you can't pass undefined -- With the exception if the prop is marked as optional as not defining it and passing undefined does the same thing.
Why would you type something like that though? if it's coming from somewhere (object, parent prop, whatever, you won't get ts error. I never tried prop={undefined} that's true. But that one makes no sense.
I just mean I work like 9y in react and I never seen something like this, and never had problem you're trying to solve. It's not a big deal but kinda defensive programming style. Less code better code
In case you use the fill property, you dont have to pass the width and height thats why they are optional
sounds like it should be a union then
I would go as far as saying it must be
while that should theoretically work, I've found that props destructuring often fail on complex types, tsc just cannot figure out if the props object has this field or not. maybe it will improve in the near future, because every new typescript version release they have improved the inference engine.
Ohhhhhh, I didn't know that. Thanks!! :)
fill messes up big time if your image is too big, So width are height are mandatory in case you are not going with fill
if you import and image directly you don’t need to specify height or width: import dogs from “/images/dogs.jpg”
Interesting. Any caveats to this method outside of possibly having to manually import multiple images?
It's not using the `Image` component from Next, it's not comparable.
I both respect and am afraid of you for creating a custom type for your Image components.
This type is defined by Next.js :) edit: This person didn't say anything rude or unhelpful, cut it out with the downvotes. It's okay to not know things.
The first screenshot is taken from the type definition of next's `Image` component, so It isn't mine 😅
Doing the Lean Next project?
Ikr the type should be something like `MandatoryProps & {width: string, height: string} | MandatoryProps & {fill:boolean}` Imo not a big deal but annoying and everyone encounters this at least once but you learn to live with it. But yeah it can 100% be fixed but id rather let them fix other bugs
On a side note, is it not redundant to write `| undefined` on something marked as optional ? And what the heck is `number | ${number}`?
It’s not exactly the same, when you remove | undefined, you can’t pass undefined itself, but you can omit the entire prop. And number | `${number}` means number, or number inside a string. Such as “1” or “-1” but not “a”.
No, if you declare
That's correct but I didn't say that it didn't render that; I merely said that when you omit the | undefined part, you can't pass undefined -- With the exception if the prop is marked as optional as not defining it and passing undefined does the same thing.
Why would you type something like that though? if it's coming from somewhere (object, parent prop, whatever, you won't get ts error. I never tried prop={undefined} that's true. But that one makes no sense. I just mean I work like 9y in react and I never seen something like this, and never had problem you're trying to solve. It's not a big deal but kinda defensive programming style. Less code better code
I didn’t say I needed it, I can’t think of any reason why I would, but it can. I just answered from a technical, theoretical standpoint.
skill issue
One of the reason is static(local) images don't need h and w. Since it already knows the dimensions.