Typescript 定义JMX的类型：类型上不存在属性键

我正在实现一个定制jsxFactory功能的应用程序.所以，我的tsconfig.json如下:

{
    "compilerOptions": {
        "lib": ["es2015", "dom"],
        "jsx": "react",
        "jsxFactory": "createDOMElement"
    },
    "include": ["./src/**/*"]
}

其中createDOMElement是我 for each JMX元素调用的自定义函数.

我的申请代码如下:

function createDOMElement(tagName: string | Function, props: any, ...children: any[]) {
    /* my custom implementation */
}

function Button(data: { text: string }) {
    const button = (
        <button>{data.text}</button>
    );
    /* some logic here */
}

export function Main() {
    const el = (
        <Button text="the text" key="my-key"  />
    );

    /* some logic here */
}

如您所见，我定义了两个组件:

• Button是接受字符串text作为属性的组件
• Main是创建Button组件的组件，提供text和key个属性.

虽然text属性由Button签名定义，但key不是. 从概念上讲，组件Button不应该允许使用key.事实上，VSCode给了我一个错误:

Type '{ key: string; text: string; }' is not assignable to type '{ text: string; }'.
  Property 'key' does not exist on type '{ text: string; }'.ts(2322)

无论如何，一些像react这样的库允许规范key属性，即使组件没有将其作为属性，我想对jsxFactory的自定义实现也这样做.

如果我理解正确的话，这是一个类型脚本类型问题，JMX类型脚本命名空间允许我定义它，但我不明白如何让每个组件都有key属性. 我想实例化指定已定义属性和key属性的组件，即使没有指定它.

如何配置类型脚本来支持它？