如何在 Electron 15 中将 webContents 声明为 TypeScript

Posted 2023-03-22

【中文标题】如何在 Electron 15 中将 webContents 声明为 TypeScript

【英文标题】：How to declare webContents to TypeScript in Electron 15

【发布时间】：2021-11-30 12:23:27

【问题描述】：

说明

升级到 Electron 14 → 15 为我的主进程引入了以下 TypeScript 构建错误。

错误 TS2749：“webContents”指的是一个值，但在此处用作类型。您的意思是“typeof webContents”吗？

代码中的声明是

import  webContents, dialog  from 'electron';

// ...

logContents: webContents | undefined

Electron 14 及之前的版本没有给我带来任何问题。

复制

问题很容易重现。

克隆回购。

git clone https://github.com/pglezen/electron-typescript-svelte-starter e15

安装依赖项。

cd e15
npm install
npm ls electron

这应该验证 Electron 14 的安装。

运行主进程构建。

npm run build:main

应该不会遇到任何错误。

升级到 Electron 15。

npm install electron@15.1.0

重新运行构建。

npm run build:main

下面列出了完整的错误文本。

src/main/Logger.ts:13:16 - error TS2749: 'webContents' refers to a value, but is being used as a type here. Did you mean 'typeof webContents'?

13   logContents: webContents | undefined;
                  ~~~~~~~~~~~

src/main/Logger.ts:14:17 - error TS2749: 'webContents' refers to a value, but is being used as a type here. Did you mean 'typeof webContents'?

14   mainContents: webContents | undefined;
                   ~~~~~~~~~~~


Found 2 errors.

尝试修复

1。将webContents 作为类型导入。

我将webContents 声明更改为

import type  webContents  from 'electron';

结果：消息没有变化。

2。使用 TypeScript typeof 运算符

这是在错误消息中建议的。

结果：删除了上述错误信息；但是在我尝试在webContents 上调用函数时引入了以下错误：

TS2339：“typeof WebContents”类型上不存在属性“send”

【参考方案1】：

我猜这个 API 在最新版本中发生了一些变化。但至少从版本 15 开始，您并没有正确使用此 API。

According to the docs 你从webContents 模块得到的值，有these methods。

而来自BrowserWindows 的WebContents 的实例有these methods

这些是完全不同的值和类型。

Playground here that illustrates the difference.

---

您可能想要来自BrowserWindow 的webContents。其中那些似乎是WebContents（注意大写W）类的实例，您可以按预期导入和使用。

import  WebContents, BrowserWindow  from 'electron';

const windowWebContents: WebContents = new BrowserWindow().webContents
windowWebContents.send('testing') // WORKS

【讨论】：

感谢亚历克斯，让我理顺。使用 WebContents 而不是 webContents 解决了我的构建问题。