如何在TypeScript/JSX中向现有HTML元素添加属性? [英] How do I add attributes to existing HTML elements in TypeScript/JSX?

问题描述

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

Anyone know how to properly add/extend all native HTML element attributes with custom ones?

使用用于合并接口的TypeScript文档，我以为我可以这样做:

With the TypeScript documentation for merging interfaces, I thought that I could just do this:

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

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

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

But I get the following Intellisense error in vscode 1.6.1 (latest):

[ts]属性"block"在类型"HTMLProps"上不存在.

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

他们所引用的HTMLProps是React.HTMLProps<T>，并且声明div元素可以像这样使用它:

The HTMLProps to which they are referring is React.HTMLProps<T> and the div element is declared to use it like so:

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

我尝试重新声明div，但无济于事.

I tried redeclaring the div, but to no avail.

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

以下是对我有用的内容:

Here's what ended up working for me:

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

推荐答案

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

Looks like in older versions of type definition files (v0.14) the interfaces were simply declared under a global React namespace, so previously you could use the standard merging syntax.

declare namespace React {

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

但是，新版本的d.ts文件(v15.0)在模块中声明了所有内容.由于模块不支持合并，据我所知，目前唯一的选择似乎是module augmentation: https://www.typescriptlang.org/docs/handbook/declaration-merging.html

However the new version of d.ts file (v15.0) have declared everything inside a module. Since modules do not support merging, to the best of my knowledge the only option right now seems to be module augmentation: https://www.typescriptlang.org/docs/handbook/declaration-merging.html

我做了以下实验，对我有用:

I did the following experiment and it worked for me:

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

显然这很繁琐，您可以将增强代码放在打字稿手册中示例中所示的另一个文件中，然后将其导入:

Obviously this is quite tedious, you could put the augmentation code in another file as shown in the example from the typescript handbook, and import it:

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

但是它仍然很脏.因此，也许最好与类型定义文件的贡献者一起解决这个问题.

But it's still quite dirty. So maybe it's best to address the issue with the contributors of the type definition file.

这篇关于如何在TypeScript/JSX中向现有HTML元素添加属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！