Is there a good quickstart example out there of using TypeScript with Electron?


#1

I am somewhat new to Electron, at a junior-to-mid level of experience with TypeScript, and am trying to experiment with using TypeScript instead of vanilla JS in an Electron project.

I’m running into so many issues, I don’t even know where to begin with specific questions at this point. There are surprisingly few examples out there on the Internet, and they tend to be either:

  1. A year or more old. So much has changed with both Electron and TypeScript over the past year, those public examples are frankly doing more harm than good now.

  2. Focused on Angular 2, webpack, and a fist full of other variables that muddy the water. The most well-known example of Electron+TypeScript is Visual Studio Code… but that project source is like examining a space shuttle to learn how to build a skateboard.

I’m just looking for some basic implementation of the “electron-quick-start” example, with main.js and renderer.js replaced with main.ts and renderer.ts. Using the most recent possible version of Electron and TypeScript. With current tooling (e.g. “typings” instead of “tsd”) and code practices (e.g. how do you import Electron and Node modules into the main script and renderer script?). No other frameworks or dependencies thrown into the mix.

I searched this forum, and surprisingly this hasn’t really been discussed. There’s one post where someone asked something similar back in October, but it never really got a response.

If you know of such a current quickstart-level example, can you please share a link? Or if you’re an Electron and TypeScript fan who has tinkered with such a thing in private, could you please do humanity a favor and throw it in a public GitHub repo? If I actually knew what I was doing, I don’t imagine it would take more than a few minutes to fork and convert the standard “electron-quick-start” repo. Thanks!


#2

After a couple of days of painful trial-and-error, I’ve finally hacked together something that basically works. However, the frustrating thing is that I don’t really understand WHY it works.

I’ve posted my code up on GitHub, and carefully documented my process and open questions in the README file (see “Notes on TypeScript” section). If anyone takes a look at that and is able to resolve any of the lingering questions that it raises, I’d definitely appreciate it!


#3

Your main.ts is being converted to main.js which is being used by electron. So electron (or anything really) wont work directly with typescript, but typescript is being compiled to clean javascript.

So you probably have compileOnSave enabled and hide gitignored files which hides your main.js and renderer.js


#4

Umm… yep. I’m treating the main.ts and renderer.ts as the actual source, and the TypeScript-generated main.js and renderer.js as compiler output. So I only include the source in source control. I know that some people go ahead and throw the compiler output in source control too. The conceptual basics of TypeScript aren’t really my issue, though.

My main issue is that TypeScript uses one type definition file for working with Node.js (i.e. the Electron main process), and another type definition file for working in a browser context (i.e. the Electron renderer process). By default, those two type definition files conflict with each other, and there’s no nice and clean way to use both within the same project.

That seems like a bizarre design to me. The whole point of Node.js is to make it easy for “full stack” developers to use the same language on the back-end and front-end simultaneously. So why have a non-modular type definition manager, that assumes your project will be back-end only or front-end only and never both?


#5

I don’t really know much about TypeScript (even less with build process, etc surrounding it). But it’s a project decision you’ve made, and I don’t feel it’s on Electron to provide you with an easy fix.

While both Node and Chromium are V8, the ‘front-end’ and ‘back-end’ still have different needs, and can’t entirely have parity between the two. Maybe you or someone else could work on a typing that fits both? I don’t really know the ins and outs, but as far as I’m aware, where MS (and I guess Google now) are TypeScript users, GitHub favours CoffeeScript or pure vanilla ES6.


#6

I don’t disagree… but I haven’t expressed any expectation of “official support” from the Electron team, either. That’s why I’m discussing this in the electron discussion category, rather than support or through a GitHub issue ticket.

Based on similar discussion threads I’ve started in TypeScript-related forums, the approach in my example repo above is pretty much the only way to make it work for now. It’s really more of a TypeScript problem than an Electron one… but they are both very popular emerging projects, and it’s inevitable that people will try using them together.

24 hours ago, a thorough Google search would reveal no up-to-date working example or documentation of the pain points. Now, it would. That’s what discussion forums are for.


#7

I have some: https://github.com/DenisKolodin/tsng2
Boilerplate TypeScript + Angular 2 + Electron (optional) Project


#8

Not bizarre at all. Code on the server and code on the client are separate and isolated, bridged by a transport protocol in HTTP passing data as json. If they use the same language that’s coincidental (and helps only by requiring the developer to have knowledge/experience in one language).

Bizarre would be if a single codebase ran on the server and the client without any bridge.


#9

I also added a simple example of this: https://github.com/perlun/electron-angular2-quickstart

(it’s based on the Angular quickstart repo, with an added main.ts that launches the Electron window and typings & dependency on electron.)


#10

@perlun: is it possible to descripe how its work and how to make use of electron APIs inside that app,
I am learning all these new technologies (Angular2, Typescript & electron) so its a bit confusing for me, btw I updated electron and electron typings to the latest version but it seems it could not initiate app (electron/main.js)


#11

slack has an article about typescript usage in their electron app. Interesting read https://slack.engineering/typescript-at-slack-a81307fa288d Haven’t tried but according to the article https://github.com/electron-userland/electron-forge is the best place to start with!