How to add my own typescript classes in Electron project

Question

I'm creating a hello world project in Electron and found out I can use Typescript for the Main process, https://electronjs.org/blog/typescript.

It says to use Typescript change the file extension from index.js to index.ts and then update the package.json to point to the new script:

{
  "name": "electrontypescript",
  "version": "1.0.0",
  "description": "Typescript and Electron",
  "main": "index.ts",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^5.0.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

It works but when I went to add my own class it throws errors.

Top of index.ts:

const { TypeHouse } = require ("./TypeHouse");

TypeHouse.ts:

function test() {

}

export class Cat {

}

export class TypeHouse {
   public status: String = "ready";
   private _output: String = "";
   readonly startTime = Date.now();
   private running: Boolean = false;

   constructor(private _message: String, private _prompt: String) {
       this.setStatus(_message);
   }

   async execute(): Promise<void> {
       try {
           //await CommandExecutor.execute(this);
       } catch (exception) {
           this.handleError(exception);
       } finally {
           //this.emit("end");
       }
   }

   handleError(message: TypeHouse | string): void {
       this.setStatus("Status.Failed");
       if (message) {
          // 
       }
   }

   isRunning(): boolean {
       return this.running !== false;
   }

   public setStatus(value: String) {
       this._output = value;
   }
}

module.exports = {TypeHouse, Cat};

Package.json:

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Electron",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^5.0.1",
    "typescript": "^3.5.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

Error message:

App threw an error during load Error: Cannot find module './TypeHouse' Require stack: - /Users/projects/ElectronApp/index.ts - /Users/projects/ElectronApp/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js

I'm using Visual Studio Code if it matters (it throws the error in the console).

Shaun Luttin Shaun Luttin · Accepted Answer · 2019-06-08T03:17:21

Electron is providing type declarations not the ability to run TypeScript directly. We still need to transpile TypeScript to JavaScript before running it.

Keep your main pointing at index.js.
Transpile your TypeScript.
Then call npm start.

In step (2) we will transpile the index.ts and TypeHouse.ts files into JavaScript. Here is how to get started transpiling TypeScript to Javascript. From your project directory run these these commands:

npm install -g typescript
tsc --init        // create a tsconfig.json file with reasonable default values
tsc               // transpile your TypeScript to JavaScript
npm start         // run the output index.js file

Hmm... where do you put the npm run build? Do I replace the value in the start property? I've updated the post with package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Electron",
  "main": "index.js",
  "scripts": {
    "build": "tsc",             <--------------------------
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^5.0.1",
    "typescript": "^3.5.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

From there you can do npm run build from the command line, which will be the equivalent of doing ./node_modules/.bin/tsc.

How to add my own typescript classes in Electron project

1 Answers