如何在Electron项目中添加自己的打字稿类 [英] How to add my own typescript classes in Electron project

问题描述

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

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.

它表示要使用Typescript将文件扩展名从index.js更改为index.ts，然后进行更新package.json指向新脚本：

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.

index.ts的顶部：

Top of index.ts:

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

TypeHouse.ts：

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：

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

错误消息：

应用程序在加载期间抛出错误错误：找不到模块'。 / TypeHouse'
需要堆栈：
-/Users/projects/ElectronApp/index.ts
-/Users/projects/ElectronApp/node_modules/electron/dist/Electron.app/Contents/Resources /default_app.asar/main.js

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（它会在控制台中引发错误） 。

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

推荐答案

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

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

1. 保持您的主指向 index.js 。


2. 转换您的TypeScript。


3. 然后调用 npm start

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

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

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 

嗯...您将npm run build放在哪里？是否替换start属性中的值？我已经用package.json

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 。

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

这篇关于如何在Electron项目中添加自己的打字稿类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！