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