2

测试.tsx

<img onerror="this.style.display='none'" height="178" cmd="start" />

产量

error TS2339: Property 'onerror' does not exist on type 'HTMLAttributes'.

所以我在 JSX 部分上方的 test.tsx 中添加：

namespace JSX {
  interface HTMLAttributes {
    onerror?: any; // 1. attempt: add the missing onerror attribute
  }
  interface IntrinsicElements {
    img: any // 2. attempt: generally override the type of img, allowing anything
  }
}

但没有任何效果。唔？

如何在本地向我想要使用的 JSX 代码添加属性？

我知道我可以粗暴地破解导入的类型文件，但我想知道是否有本地方法。

编辑： 除了 onerror 属性（即 preact.d.ts 中“错误地”缺失）之外，我通常想知道如何将临时属性添加到内在元素甚至我自己的元素。奇怪的是，打字稿从不抱怨我可能也会切换的“data-*”属性（无论如何都想成为一个不错的 html5 开发人员）。但是关于扩展接口 HTMLAttributes 的问题仍然对我开放。

4

2 回答 2

4

你需要重新定义反应的ImgHTMLAttributes<T>

import * as React from 'react'
declare module 'react' {
    interface ImgHTMLAttributes<T>  {
         onError?: ReactEventHandler<T>;
    }
}

或者更好的是重新定义它DOMAttributes：

import * as React from 'react'
declare module 'react' {
    interface DOMAttributes<T> {
        onError?: ReactEventHandler<T>;
    }
}

编辑

这个问题指的是 preact，因为它使用命名空间，我们需要一些三斜杠来使事情正常工作：

react.ext.d.ts

/// <reference path="./node_modules/preact/dist/preact.d.ts" />
declare namespace JSX {
    interface HTMLAttributes {
        onError: JSX.GenericEventHandler;
    }
}

测试.tsx

/// <reference path="./node_modules/preact/dist/preact.d.ts" />
/// <reference path="react.ext.d.ts" />
import * as React from 'preact'
let x = <img height="178" onError={o => console.log(o)} />;
于 2018-01-25T20:11:58.167 回答
2

它已经存在，但使用大写字母 E，如定义文件中所示。

但这对您没有帮助，因为（据我所知）您不能只在其中放一个字符串并期望对其进行评估。
事实上，编译器会抱怨说： 

Type '{ onError: "this.style.display='none'"; height: "178"; }' is not assignable to type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'.
  Type '{ onError: "this.style.display='none'"; height: "178"; }' is not assignable to type 'ImgHTMLAttributes<HTMLImageElement>'.
    Types of property 'onError' are incompatible.
      Type '"this.style.display='none'"' is not assignable to type '(event: SyntheticEvent<HTMLImageElement>) => void'.

相反，您需要执行以下操作：

class MyComponent {
    private img: HTMLImageElement;

    render() {
        return <img height="178" onError={ this.onError.bind(this) } ref={ el => this.img = el } />;
    }

    private onError() {
        this.img.style.display = "none";
    }
}

编辑

根据我在preact 的定义文件中看到的内容，只有该preact部分作为模块导出，因此您只能对其进行扩充。
幸运的是，定义包含PreactHTMLAttributes然后由 扩展JSX.HTMLAttributes，所以你可以这样做：

declare module "preact" {
    interface PreactHTMLAttributes {
        onerror?: any;
    }
}
于 2018-01-25T20:01:49.260 回答