Question

在我的模块顶部，

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      webview: Electron.WebviewTag
    }
  }
}

然后在我的渲染方法中

  render() {
    const {classes: c} = this.props

    return (
      <webview
        className={c.webview}
        ref={this.webviewRef}
        src={getFileUrl('annotator/StandaloneEntry.html')}
        nodeintegration="true"
        webpreferences="nodeIntegrationInWorker"
        nodeintegrationinsubframes="true"
        disablewebsecurity="true"
        allowpopups="true"
      />
    )
  }

但是TypeScript抱怨Property 'addEventListener' is missing：

此外，通过在我的代码中写入declare module覆盖，它使我所有其他文件中的所有其他固有元素键入中断。例如：

还尝试将我的JSX声明更改为

declare namespace JSX {
  export interface IntrinsicElements {
    webview: Electron.WebviewTag
  }
}

或

declare namespace JSX {
  interface IntrinsicElements {
    webview: Electron.WebviewTag
  }
}

但是那些不起作用。

如果我放弃使用JSX，而是手动使用React.createElement，那么它就可以了：

    return React.createElement('webview', {
      ref: this.webviewRef,
      className: c.webview,
      src: getFileUrl('annotator/StandaloneEntry.html'),
      nodeintegration: 'true',
      nodeintegrationinsubframes: 'true',
      webpreferences: 'nodeIntegrationInWorker',
      disablewebsecurity: 'true', // does 'false' stille work?
      allowpopups: 'true',
    })

有什么想法可以使webview在TypeScript中与JSX一起正常工作，同时又不破坏所有其他固有元素类型吗？

此处有类似问题：Control a WebView object in Electron with typescript

编辑：我也尝试过declare module JSX，但没有运气：

首先它告诉我JSX是“已声明但从未读取过其值”：

我在<webview>中遇到了关于HTMLWebViewElement的错误，因此<webview>未被视为Electron.WebviewTag元素：

Answer 1

JSX的环境模块定义应该可以解决问题：

import { WebviewTag } from 'electron';

declare module JSX {
 interface IntrinsicElements {
   webview: WebviewTag;
 }
}

请参阅相关的Github问题TSX rejects custom elements 和ambient modules

的文档

Answer 2

要增强模块（与声明模块相比），请在前面添加src/ article.js data/ posts/ my-first-article.md

import 'moduleName'

如何在TypeScript中使用Electron <webview>标签？

2 个答案: