如何在TypeScript / JSX中向现有HTML元素添加属性？

任何人都知道如何使用自定义的属性正确添加/扩展所有本机HTML元素属性？

有了the TypeScript documentation for merging interfaces,我以为我可以这样做：

interface HTMLElement {
    block?: BEM.Block;
    element?: BEM.Element;
    modifiers?: BEM.Modifiers;
}

<div block="foo" />; // error

但是我在vscode 1.6.1(最新版本)中收到以下Intellisense错误：

[ts] Property ‘block’ does not exist on type ‘HTMLProps’.

他们所指的HTMLProp是React.HTMLProps< T>并声明div元素使用它如下：

namespace JSX {
    interface IntrinsicElements {
        div: React.HTMLProps<HTMLDivElement>
    }
}

我尝试重新调整div,但无济于事.

相关：https://github.com/Microsoft/TypeScript/issues/11684

编辑：这是最终为我工作的东西：

declare module 'react' {
    interface HTMLAttributes<T> extends DOMAttributes<T> {
        block?: string
        element?: string
        modifiers?: Modifiers // <-- custom interface
    }
}

解决方法

看起来在旧版本的类型定义文件(v0.14)中,接口只是在全局React命名空间下声明,因此以前您可以使用标准合并语法.

declare namespace React {

    interface HTMLProps<T> extends HTMLAttributes,ClassAttributes<T> {
    }
}

然而,新版本的d.ts文件(v15.0)已经在模块中声明了所有内容.由于模块不支持合并,据我所知,现在唯一的选择似乎是模块扩充：
https://www.typescriptlang.org/docs/handbook/declaration-merging.html

我做了以下实验,它对我有用：

import * as React from 'react';

declare module 'react' {
     interface HTMLProps<T> {
        block?:string;
        element?:string;
        modifiers?:string;
    }

}

export const Foo = () => {

    return (
        <div block="123" element="456">
        </div>
    )
};

显然这非常繁琐,您可以将扩充代码放在另一个文件中,如typescript手册中的示例所示,并导入它：

import * as React from 'react';
import './react_augmented';

但它仍然很脏.所以也许最好用类型定义文件的贡献者来解决这个问题.