reactjs - Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16

Question

Since React 16 now allows custom DOM attributes, I tried to leverage this in my Typescript code:

import * as React from 'react';

<div className="page" size="A4">
</div>

but receive this error message:

error TS2339: Property 'size' does not exist on type 'DetailedHTMLProps< HTMLAttributes< HTMLDivElement>, HTMLDivElement>'.

This thread suggests to do a module augmentation, so I tried this way:

import * as React from 'react';

declare module 'react' {
     interface HTMLProps<T> {
        size?:string;
    }    
}

Same error message.

Finally, I also tried to declare page as a new HTML tag:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      page: any
    }
  }
}

<page className="page" size="A4">
</page>

It gets rid of the error message, but the size attribute is completely ignored in the compiled code, and I end up with:

<page className="page">
</page>

Ideally, the last one is my preferred solution. I'd like to use the size custom attribute alongside the page custom tag.

tsconfig.js

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "allowUnusedLabels": true,
    "allowUnreachableCode": true
  }
}

Answer 1

HTML supports data-* attribute type for custom attributes. You can read about it more here.

Definition and Usage The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attributes consist of two parts:

• The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
• The attribute value can be any string

Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Rather than just using size="A4" you can use data-size="A4"

Example

<div className="page" data-size="A4">
  // ....
</div>