Electron与TypeScript的结合

Electron与TypeScript的结合

概述

本文档简要地说明使用Electron与TypeScript构建一个简单的桌面应用程序。

项目结构

my-electron-app/
├── dist/ // TypeScript 编译后的输出目录
├── src/ // 源代码目录
│ ├── main.ts // 主进程代码
│ ├── preload.ts // 预加载脚本
│ └── renderer.ts // 渲染进程代码
├── index.html // 渲染进程的 HTML 文件
├── package.json // 项目配置文件
├── tsconfig.json // TypeScript配置文件

我们先根据上述项目结构,创建空白文件:

图片失效即显示

配置

  1. package.json 定义项目的入口文件和脚本:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "a simple electron demo",
"main": "./dist/main.js",
"author": "bing",
"license": "MIT",
"scripts": {
"build": "tsc",
"start": "npm run build && electron ./dist/main.js"
}
}
  1. 安装依赖
图片失效即显示
# 设置环境临时变量
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
# 安装Electron依赖
yarn add electron --dev

安装完成:

图片失效即显示

package.json 文件新增一项:

图片失效即显示
  1. tsconfig.json 配置TypeScript编译选项:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}
  1. launch.json 配置 VS Code 调试环境:
{
"version": "0.2.0",
"compounds": [
{
"name": "Main + renderer",
"configurations": ["Main", "Renderer"],
"stopAll": true
}
],
"configurations": [
{
"name": "Renderer",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}"
},
{
"name": "Main",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": [".", "--remote-debugging-port=9222"],
"outputCapture": "std",
"console": "integratedTerminal"
}
]
}

配置前:

图片失效即显示

配置后:

图片失效即显示

请将运行和调试选项切换到 “Main+Render”:

图片失效即显示

代码实现

  1. main.ts 主进程负责管理应用程序的生命周期和窗口:
import { app, BrowserWindow, ipcMain } from "electron";
import path from "path";
let mainWindow: BrowserWindow | null;
function createWindow(): void {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"), // Preload script
},
});
// Load the HTML file for the renderer process
mainWindow.loadFile(path.join(__dirname, "../index.html"));
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
// Listen for messages from the renderer process
ipcMain.handle("get-app-info", () => {
return {
appName: app.getName(),
appVersion: app.getVersion(),
};
});
  1. preload.ts 预加载脚本用于在主进程和渲染进程之间安全地传递数据:
import { contextBridge, ipcRenderer } from 'electron';
// Expose a safe API to the renderer process
contextBridge.exposeInMainWorld('electronAPI', {
getAppInfo: (): Promise<{ appName: string; appVersion: string }> => ipcRenderer.invoke('get-app-info'),
});
  1. renderer.ts 渲染进程负责处理用户界面逻辑:
// Define the ElectronAPI interface
interface ElectronAPI {
getAppInfo: () => Promise<{ appName: string; appVersion: string }>;
}
// Retrieve electronAPI from the preload script
const electronAPI: ElectronAPI = (
window as unknown as { electronAPI: ElectronAPI }
).electronAPI;
// Fetch application information and display it on the page
electronAPI.getAppInfo().then((info) => {
const appInfoElement = document.getElementById("app-info");
if (appInfoElement) {
appInfoElement.innerText = `App: ${info.appName}, Version: ${info.appVersion}`;
}
});
  1. index.html 渲染进程的 HTML 文件定义了用户界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self';"
/>
<title>Electron + TypeScript Demo</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<div id="app-info">Loading app info...</div>
<script src="./dist/renderer.js"></script>
</body>
</html>

现在,我们已填充除 dist目录下 外所有的文件:

图片失效即显示

运行项目

  1. 编译 TypeScript 代码:
图片失效即显示
npm run build
图片失效即显示
  1. 启动 Electron 应用:
图片失效即显示
npm start

效果:

图片失效即显示

声明

内容准确性: 我会尽力确保所分享信息的准确性和可靠性,但由于个人知识有限,难免会有疏漏或错误。如果您在阅读过程中发现任何问题,请不吝赐教,我将及时更正。

AI: 文章部分代码参考了DeepSeek和ChatGTP大语言模型生成的内容。

posted on   wubing7755  阅读(15)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示