electron / electron/electron

Extract the type definitions for the 'electron/renderer' module from electron.d.ts and remove triple-slash references to Node.js environment types.

Open
#47,487 1 comment 0 reactions 0 assignees View on GitHub
component/typescript enhancement :sparkles:
Dominant language
C++
Stars
123k
Forks
17.5k
Avg merge
14h 28m
Merged PRs (30d)
870

Description

### Preflight Checklist

- [x] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [x] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [x] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a feature request that matches the one I want to file, without success.

### Problem Description

To date, the implementation approach for context isolation with TypeScript type enhancement support has been as follows:
> 目前,带有 typescript 类型增强的上下文环境隔离的实现如下

``` typescript
export interface IElectronAPI {
loadPreferences: () => Promise
}

declare global {
interface Window {
electronAPI: IElectronAPI
}
}
```

When bridging complex API type definitions – such as overloaded signatures, generics, etc. – manually writing type declaration files becomes less than ideal. This led to the following implementation:

> 当桥接一些复杂的 api 类型定义时 —— 比如重载或泛型之类,手动去写定义文件稍显不够优雅。于是有了如下实现。

``` typescript
// apis.ts
import { ipcRenderer } from 'electron/renderer'

export const Apis = {
// ... some complex apis with `ipcRenderer `
}

export declare type ElectronAPI = typeof apis
```

``` typescript
// interface.d.ts
import type { ElectronAPI } from './apis'

declare global {
interface Window {
electronApi?: ElectronAPI
}
}
```

However, this requires importing the Electron module's type definitions (when tsconfig uses `"exclude": ["node_modules", "dist", "out"]` for Node.js type isolation) to resolve the `electron/renderer` module. This causes Node.js environment type declarations from `electron.d.ts` to pollute the renderer layer's typing. For example, the global `process` variable appears in TypeScript static type hints within the renderer layer despite being nonexistent at runtime.

> 然而,这需要导入 Electron 模块的类型定义(当 tsconfig 使用 `"exclude": ["node_modules", "dist", "out"]` 进行 Node.js 类型隔离时),以解析 `electron/renderer` 模块。这会导致 `electron.d.ts` 中的 Node.js 环境类型声明污染渲染层的类型系统。例如,尽管全局变量 `process` 在运行时并不存在于渲染层,但它仍然会在 TypeScript 的静态类型提示中出现。

### Proposed Solution

Create a dedicated renderer.d.ts type declaration file excluding all Node.js triple-slash references, then expose it through the package.json exports map to enforce type isolation in renderer processes.

> 创建一个专用的 renderer.d.ts 类型声明文件,排除所有与 Node.js 环境相关的三斜线引用,然后通过 package.json 的 exports 映射暴露它,以在渲染进程中进行类型隔离。

``` json
{
"exports": {
"./renderer": {
"types": "./renderer.d.ts"
}
}
}
```

### Alternatives Considered

Publish a dedicated package containing type definitions for the `electron/renderer` module.

> 单独发布一个 `electron/renderer` 模块的类型声明包。

### Additional Information

_No response_

Edit: To ensure accurate expression and reduce issues caused by translation, I've included the Chinese expression.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.