Como adiciono atributos aos elementos HTML existentes no TypeScript / JSX?

Alguém sabe como adicionar / estender corretamente todos os atributos do elemento HTML nativo com atributos personalizados?

Coma documentação TypeScript para mesclar interfaces, Pensei que poderia fazer isso:

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

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

Mas recebo o seguinte erro do Intellisense no vscode 1.6.1 (mais recente):

[ts] A propriedade 'block' não existe no tipo 'HTMLProps'.

oHTMLProps ao qual eles estão se referindo éReact.HTMLProps<T> e adiv O elemento é declarado para usá-lo da seguinte forma:

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

Tentei redeclarar odiv, mas sem sucesso.

Palavras-chave:https://github.com/Microsoft/TypeScript/issues/11684

Editar: Aqui está o que acabou funcionando para mim:

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

questionAnswers(2)

yourAnswerToTheQuestion