DEV Community

loading...

[TypeScript] Try Electron

Masui Masanori
Programmer, husband, father I love C#, TypeScript, etc.
・4 min read

Intro

This time, I will try Electron with TypeScript.

Environments

  • Node.js ver.15.14.0

package.json

{
    "main": "./js/main.js",
    "scripts": {
        "start": "electron ."
    },
    "devDependencies": {
        "electron": "^12.0.2",
        "typescript": "^4.2.4"
    }
}
Enter fullscreen mode Exit fullscreen mode

TS5023: Unknown compiler option 'init'

I had installed TypeScript by this command.

npm install --save typescript tsc
Enter fullscreen mode Exit fullscreen mode

But when I had executed "npx tsc --init", I got an error.

error TS5023: Unknown compiler option 'init'.
Enter fullscreen mode Exit fullscreen mode

This problem had occurred on my own Surface 6.
But on my PC for work hadn't occurred.

I don't know the reason for their differences.

Resolve

Using "--save-dev" option and stopping installing tsc individually helped me avoiding the error.

npm install --save-dev typescript
Enter fullscreen mode Exit fullscreen mode

Try Electron

I create an Electron application according to "Quick Start Guide".

create executable file

I can create executable files and installer according to the document.

But because I had reset my computer and I hadn't installed some software yet, I got some errors.

git

First, when I executed "npx electron-forge import", I got an error.

It looks like you are missing some dependencies you need to get Electron running.
...
Enter fullscreen mode Exit fullscreen mode

After installing git, the error hadn't been occured.

Visual Studio

After that, when I executed "npm run make", I got another error.

An unhandled error has occurred inside Forge:
An error occured while making for target: squirrel
Failed with exit code: 1
Output:
Attempting to build package from '.nuspec'.
Id is required.

Error: Failed with exit code: 1
Output:
Attempting to build package from '.nuspec'.
Id is required.
...
Enter fullscreen mode Exit fullscreen mode

Although I had installed Visual Studio 2019, I got the same error again.
So I tried executing "npx electron-forge import" again.

After that, After that the error no longer occurred.

I thought some packages hadn't been installed at first time.

Play with Electron

Base project

main.ts

import { app, ipcMain, BrowserWindow } from 'electron';
import * as path from 'path';

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  win.loadFile('./views/index.html');
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
Enter fullscreen mode Exit fullscreen mode

I just converted into TypeScript and added semicolons.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
    <div>
        <button id="sample_button">Click</button>
    </div>
    <script src="../js/clients/main.page.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Call client-side method

I can call client-side method from electron-side through "BrowserWindow".

main.page.ts

function greet(message: string): string {
    alert(message);
    return 'OK';
}
Enter fullscreen mode Exit fullscreen mode

main.ts

...
function createWindow () {
  const win = new BrowserWindow({
...
  });

  win.loadFile('./views/index.html');
  win.webContents.executeJavaScript(`greet('Hello World')`)
    .then((returnValue) => console.log(returnValue))
    .catch(error => console.error(error));
}
...
Enter fullscreen mode Exit fullscreen mode

Result

Alt Text

I also can open Developer tool(win.webContents.openDevTools), print(win.webContents.print), or execute commands of the browser through "BrowserWindow".

Call electron-side methods from client-side

I can't call electron-side methods from client-side.
So if I want to do so, I have to add event listeners into electron-side, and I fire the events from client-side.

main.ts

...
ipcMain.on('call_from_dom', (args) => console.log('called'));
Enter fullscreen mode Exit fullscreen mode

client-side js?

const { ipcRenderer } = require('electron');
function clickEvent() {
    ipcRenderer.send('call_from_dom', ['hello electron']);
}
Enter fullscreen mode Exit fullscreen mode

Now I have a problem.
I can't add "client-side js?" code into "main.page.ts", because I can't use "require" in client-side.

So I add the code into "preload.ts(preload.js)".

import { ipcRenderer } from 'electron';
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector: string, text: string|undefined) => {
      const element = document.getElementById(selector)
      if (element != null) {
        element.innerText = text ?? '';
      }
    }  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
    // add the event to call electron-side method.
    const button = document.getElementById('sample_button');
    if(button != null) {
        button.addEventListener('click', (ev) => ipcRenderer.send('call_from_dom', ['hello electron']));
    }
  });
Enter fullscreen mode Exit fullscreen mode

Although that code is for client-side, it may be executed in electron-side.

Get command-line arguments

I can get command-line arguments by "process.argv".

main.ts

...
function createWindow () {
   console.log(process.argv);
... 
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)