How to use Microdata in React+Typescript?

Question

When I add itemscope itemtype="http://schema.org/Product" to h1, I get this error:

Type '{ children: string; itemscope: true; itemtype: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'. Property 'itemscope' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'

<h1 itemscope itemtype="http://schema.org/Product">Amasia</h1>

How to use Microdata in React+Typescript?

Answer 1

Not very elegant, but this works:

// foo.d.ts
declare namespace React {
    interface HTMLAttributes<T> {
        itemscope?: boolean;
        itemtype?: string;
    }
}
// app.tsx
function foo(): JSX.Element {
    return (
        <h1 itemscope itemtype="http://schema.org/Product">
            Amasia
        </h1>
    );
}

Works for me (Typescript 3.4.5).

Answer 2

For React, it is case Sensitive. Pay attention to: itemScope and itemType spelling

<div itemScope itemType={"http://schema.org/Product"}>{...}</div>

Answer 3

If you use typescript you should write like this

<h1 itemScope itemType={"http://schema.org/Product"}>{...}</h1>