你最好有一些 TypeScript 基础，没有的话，可以看下我录制的免费视频，或者，这只是七八本里面的一本。

    可以参考 electron-webpack 文档 ，它会告诉你更多的信息。

    里面其实没有任何代码，只是会帮你安装一些必要的依赖而已。然后初始化 tsconfig.json 配置文件，它规定了你写 ts 的规范，你必须全局安装了 typescript 才会有 tsc 命令，它可以编译 ts 文件。

    1. tsc --init
    1. {
    2.   "extends": "./node_modules/electron-webpack/tsconfig-base.json",
    3.   "compilerOptions": {
    4.     "typeRoots": ["./src/main"]
    5.   }
    6. }

    在介绍里面就有说明 rxjs，它其实是一个非常强大的工具，但是由于学习曲线的陡峭，只有少部分以 Angular 为开发栈的公司在使用它，比如 Daocloud，现在我们先安装它。

    安装 electron-util 的定义文件，这个定义文件跟 API 对应是不全的，所以我们还需要自己魔改一下。

    1. npm install @types/electron-util --save-dev

    以插件形式添加类型可以 , 新建 src/main/shim.d.ts 文件

    1. import util from 'electron-util'
    3.   export function loadFile(win?: any, path?: string): void
    4. }

    主进程入口

    • 导入依赖
    1. fromEvent(<any>win.webContents, 'devtools-opened').subscribe(() => {
    2.   setImmediate(() => win.focus())
    3. })
    5. win.webContents.on('devtools-opened', () => {
    6.   win.focus()
    7.   setImmediate(() => win.focus())
    8. })
    • 窗口创建函数

    内容基本跟之前的一致，只不过加了 TypeScript 类型，完整代码可以参考源码仓库。

    1. let mainWindow: BrowserWindow | null
    4.   const win = new BrowserWindow(opts)
    6.   if (util.is.development) {
    7.     win.webContents.openDevTools()
    8.   } else {
    9.     util.loadFile(win, 'index.html')
    10.   }
    12.   fromEvent(<any>win, 'close').subscribe(() => (mainWindow = null)) // 关闭事件
    14.   fromEvent(<any>win.webContents, 'devtools-opened').subscribe(() => {
    15.     // 打开开发者工具栏后
    16.     win.focus()
    17.     setImmediate(() => win.focus())
    18.   })
    21. }
    • 事件处理函数

    一个一个的写，不如写一个循环来帮我们做事件绑定。

    通过一个 map 的映射，来自动监听事件。