reactjs - Hvordan passer man HTML-attributter til et børne- element ved hjælp af React og Typescript uden at få fejlen "IntrinsicAttributes & HTMLAttributes"?

Jeg har en funktionel React-komponent, der indpakker et image-element:

type BlobImageProps = HTMLAttributes<HTMLImageElement> & {
    blobId: string
}

function BlobImage(props: BlobImageProps){
    const {blobId, ...htmlAttributes} = props
    const [objectUrl, setObjectUrl] = useState<string>()
    // ...
    // ... load image blob using effect hook
    // ...
    return <img {...htmlAttributes} src={objectUrl}/>
}

Og jeg bruger det sådan her:

function MyPage(){
    //...
    return (
        <BlobImage blobId="xyz1234" alt="Funny cats"/>
    )
}

Men jeg får en TypeScript-fejl, der siger

Type '{ blobId: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & HTMLAttributes<HTMLImageElement> & { blobId: string; }'.
  Property 'alt' does not exist on type 'IntrinsicAttributes & HTMLAttributes<HTMLImageElement> & { blobId: string; }'.

Hvad er der galt med min skrivning? Hvilken type skal BlobImageProps have?

Svar #1

Når man kigger gennem React-typernes definitioner,¹ ser det ud til, at du leder efter ImgHTMLAttributes<HTMLImageElement> i stedet for HTMLAttributes<HTMLImageElement>.

¹ Hvordan jeg gjorde det: Jeg indsatte din typedefinition i min editor, satte markøren på HTMLAttributes og bad den vise mig definitionen (F12 i mit tilfælde, VSCode). Det tog mig til index.d.ts for React (i @types/react i node_modules). Jeg bemærkede, at det interface ikke har alt (og bruger ikke sin typeparameter til noget, hvilket virker mærkeligt), så jeg søgte efter alt og fandt ImgHTMLAttributes.

Relaterede artikler