由于React 16现在允许自定义DOM属性，因此我尝试在Typescript代码中利用它：

import * as React from 'react';

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

但收到以下错误消息：

错误TS2339：类型’DetailedHTMLProps ，HTMLDivElement>‘不存在属性’size’。

这个线程建议做一个moduleaugmentation，所以我尝试了这种方式：

import * as React from 'react';

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

同样的错误信息。

最后，我还尝试声明page为新的HTML标签：

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

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

它消除了错误消息，但是该size属性在编译后的代码中被完全忽略，而我最终得到：

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

理想情况下，最后一个是我的首选解决方案。我想size在pagecustom标签旁边使用custom属性。

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
  }
}