Electron is a popular framework for building desktop applications using web technologies like HTML, CSS, and JavaScript. TypeScript is a typed superset of JavaScript that provides better tooling, compile-time error checking, and type safety. In this tutorial, we will explore how to build a desktop application using TypeScript and Electron.


Prerequisites

Before we get started, make sure you have the following tools installed on your system:

  • Node.js: You can download it from the official website.
  • npm: This comes bundled with Node.js. To verify that npm is installed, run npm -v in a terminal or command prompt.
  • Visual Studio Code: This is an optional text editor that we will use to write our TypeScript code. You can download it from the official website.


Creating a new project

To get started, let's create a new directory for our project and initialize it with npm:

mkdir my-electron-app
cd my-electron-app
npm init -y

This will create a package.json file in our directory that will keep track of our project's dependencies and scripts.


Installing Electron

Next, let's install Electron as a development dependency: 

npm install --save-dev electron

This will download the latest version of Electron and add it to our package.json file.


Creating the main process

In Electron, the main process is responsible for managing the application's lifecycle and creating and managing the browser windows. Let's create a new file called main.ts in our project directory and add the following code:

import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('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();
  }
});

This code imports the app and BrowserWindow modules from Electron and defines a createWindow function that creates a new browser window with a size of 800x600 pixels and loads an index.html file. The mainWindow variable keeps track of the reference to the window, and the closed event is used to set it to null when the window is closed.

The app object is used to manage the application's lifecycle, and the ready, window-all-closed, and activate events are used to create and close the browser windows.


Creating the renderer process

In Electron, the renderer process is responsible for rendering the HTML, CSS, and JavaScript that make up the application's user interface. Let's create a new file called renderer.ts in our project directory and add the following code: 

console.log('Hello, World!');

This code simply logs a message to the console.


Creating the HTML file

Next, let's create an index.html file in our project directory and add the following code: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="renderer.js"></script>
  </body>
</html>


This HTML file includes a <script> tag that references a renderer.js file that we haven't created yet. We'll use the TypeScript compiler to generate this file from our renderer.ts file.


Configuring TypeScript

To configure TypeScript for our project, we need to create a tsconfig.json file in our project directory:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true
  },
  "include": [
    "main.ts",
    "renderer.ts"
  ]
}

This file specifies that we want to target the ES6 version of JavaScript, use the CommonJS module system, output the compiled JavaScript files to a dist directory, and enable strict type checking.


Writing TypeScript code

Now that our project is configured for TypeScript, let's write some code.

In renderer.ts, let's change the code to the following:

const message: string = 'Hello, World!';
console.log(message);

const h1 = document.createElement('h1');
h1.innerText = message;
document.body.appendChild(h1);

This code creates a const variable message with the value 'Hello, World!' and logs it to the console. It then creates a new <h1> element, sets its inner text to the message, and appends it to the document body.


Compiling and running the application

To compile our TypeScript code, run the following command in our project directory: 

npx tsc

This will compile our TypeScript code to JavaScript and place the output files in the dist directory.

To run our Electron application, run the following command in our project directory: 

npx electron .

This will start our Electron application and open a new window with our index.html file.


Conclusion

In this tutorial, we explored how to build a desktop application using TypeScript and Electron. We created the main and renderer processes, configured TypeScript, and wrote some TypeScript code that compiled to JavaScript and ran in our Electron application.

This is just the tip of the iceberg when it comes to building desktop applications with Electron and TypeScript. There are many more features and capabilities that you can explore to take your applications to the next level.