任何人都知道如何使用自定义的属性正确添加/扩展所有本机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';
