electron如何使用typescript_Javascript

引入 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 和 browserwindow
function 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 应用
}