Wie füge ich vorhandenen HTML-Elementen in TypeScript / JSX Attribute hinzu?

Weiß jemand, wie man alle nativen HTML-Elementattribute mit benutzerdefinierten Attributen richtig hinzufügt / erweitert?

Mitdie TypeScript-Dokumentation zum Zusammenführen von Schnittstellen, Ich dachte, ich könnte das einfach machen:

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

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

Aber ich erhalte den folgenden Intellisense-Fehler in vscode 1.6.1 (aktuell):

[ts] Eigenschaft 'block' existiert nicht für den Typ 'HTMLProps'.

DasHTMLProps, auf das sie sich beziehen, istReact.HTMLProps<T> und diediv element wird deklariert, um es wie folgt zu verwenden:

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

Ich habe versucht, das @ neu zu deklarierediv, aber ohne Erfolg.

Verbunden:https: //github.com/Microsoft/TypeScript/issues/1168

Bearbeiten Hier ist, was für mich gearbeitet hat:

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

Antworten auf die Frage(4)

Ihre Antwort auf die Frage