typescript - 如何在Electron项目中添加自己的 typescript 类

Question

我在Electron中创建一个hello world项目，发现可以将Typescript用于Main进程https://electronjs.org/blog/typescript。

它说使用Typescript将文件扩展名从index.js更改为index.ts，然后更新package.json以指向新脚本:

{
  "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"
  }
}

它可以工作，但是当我去添加自己的类时，它会引发错误。

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"
  }
}

错误信息:

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

我正在使用Visual Studio Code(如果有关系的话)(它会在控制台中引发错误)。

Answer 1

Electron提供了类型声明，而不提供直接运行TypeScript的能力。在运行之前，我们仍然需要将TypeScript转换为JavaScript。

保持main指向index.js。

转换您的TypeScript。

然后调用npm start。

在步骤(2)中，我们将index.ts和TypeHouse.ts文件转换为JavaScript。这是开始将TypeScript转换为Javascript的方法。在您的项目目录中，运行以下命令:

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"
  }
}

从那里，您可以从命令行执行 npm run build，与执行 ./node_modules/.bin/tsc等效。