electron使用typescript

引入 TypeScript 到 Electron 项目中是一个增强代码质量和开发体验的好方法，因为 TypeScript 提供了静态类型检查、接口和类等强大的语言特性。下面是将 TypeScript 集成到 Electron 项目中的步骤：

1. 初始化项目

如果你还没有创建 Electron 项目，可以从头开始创建一个。你可以使用 Electron Forge、Electron Builder 或任何其他工具来设置你的项目。

# 使用 Electron Forge 创建一个新的 Electron 项目
npx create-electron-app my-electron-app --template=typescript-webpack
cd my-electron-app

如果你已经有一个现有的 Electron 项目，需要手动添加 TypeScript 支持。

2. 安装 TypeScript

在你的项目目录中，安装 TypeScript 和必要的类型定义。

npm install --save-dev typescript @types/node @types/electron

3. 配置 TypeScript

在项目根目录下创建一个 tsconfig.json 文件，这是 TypeScript 编译器的配置文件。以下是一个基本的配置示例：

{"compilerOptions": {"module": "commonjs",                  // 使用 CommonJS 模块系统，适合 Node.js 环境"target": "es6",                       // 将 TypeScript 编译成 ES6 (也称为 ES2015) JavaScript"noImplicitAny": true,                 // 不允许隐式的 any 类型"removeComments": true,                // 编译时去除代码中的注释"preserveConstEnums": true,            // 保留 const enum 声明"sourceMap": true,                     // 生成 source map 文件，便于调试"outDir": "./dist",                    // 指定输出目录为 dist"esModuleInterop": true,               // 允许默认导入非 ES6 模块"allowSyntheticDefaultImports": true,  // 允许从没有默认导出的模块中默认导入"strict": true                         // 启用所有严格类型检查选项},"include": ["src/**/*"                             // 包含 src 目录下的所有文件],"exclude": ["node_modules"                         // 排除 node_modules 目录]
}

这个配置假设你的源代码位于 src 文件夹中。它将 TypeScript 代码编译到 dist 文件夹。

4. 调整 Electron 启动脚本

确保 Electron 加载 TypeScript 编译后的 JavaScript 文件。这通常涉及到修改你的 package.json 文件中的启动脚本，以指向编译后的 main 文件。

{"main": "dist/main.js",                    // 指定 Electron 主进程的入口文件为 dist 目录下的 main.js"scripts": {"start": "electron ."                   // 启动脚本，运行 Electron 应用}
}

5. 编写 TypeScript 代码

将你的 Electron 代码（通常是 main.js 和预加载脚本 preload.js）重写为 TypeScript (main.ts, preload.ts)。这涉及到将 CommonJS 风格的 require() 调用转换为 ES6 风格的 import 语句，并添加必要的类型注释。

// main.ts
import { app, BrowserWindow } from 'electron'; // 从 electron 模块导入 app 和 BrowserWindowfunction createWindow() {                      // 创建一个新的浏览器窗口的函数let win = new BrowserWindow({                // 初始化一个新的 BrowserWindow 实例width: 800,                                // 设置窗口的宽度height: 600,                               // 设置窗口的高度webPreferences: {nodeIntegration: true                    // 允许在页面中使用 Node.js}});win.loadFile('index.html');                  // 加载 index.html 文件作为应用的界面
}app.on('ready', createWindow);                 // 当 Electron 应用准备就绪后，调用 createWindow 函数

6. 编译 TypeScript

添加一个编译脚本到 package.json 中，以便可以编译 TypeScript 代码。

"scripts": {"build": "tsc",                             // 构建脚本，调用 TypeScript 编译器"start": "npm run build && electron ."      // 启动脚本，先编译 TypeScript 文件然后启动 Electron 应用
}