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

问题描述

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

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

<代码>{名称":电子打字稿"，版本":1.0.0"，描述":打字稿和电子"，主":index.ts"，脚本":{开始":电子."},开发依赖":{电子":^5.0.1"},依赖":{lodash":^4.17.11"}}

它可以工作，但是当我添加自己的类时，它会抛出错误.

index.ts 顶部:

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

TypeHouse.ts:

函数测试() {}出口类猫{}出口类 TypeHouse {公开状态:String =就绪"；私人_输出:字符串="；只读 startTime = Date.now();私人运行:布尔=假；构造函数(私有 _message:字符串，私有 _prompt:字符串){this.setStatus(_message);}异步执行():承诺<void>{尝试 {//等待CommandExecutor.execute(this);} 捕捉(异常){this.handleError(异常)；} 最后 {//this.emit("end");}}处理错误(消息:TypeHouse | 字符串):无效{this.setStatus("Status.Failed");如果(消息){//}}isRunning(): 布尔值 {返回 this.running !== false;}公共设置状态(值:字符串){this._output = 价值；}}module.exports = {TypeHouse，猫}；

包.json:

<代码>{名称":电子应用程序"，版本":1.0.0"，描述":电子"，主":index.js"，脚本":{开始":电子."},开发依赖":{电子":^5.0.1"，打字稿":^3.5.1"},依赖":{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

如果重要的话，我正在使用 Visual Studio Code(它会在控制台中引发错误).

解决方案

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

1. 让你的 main 指向 index.js.
2. 转译您的 TypeScript.
3. 然后调用 npm start.

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

npm install -g typescripttsc --init//创建一个具有合理默认值的 tsconfig.json 文件tsc//将你的 TypeScript 转换成 JavaScriptnpm start//运行输出 index.js 文件

<块引用>

嗯...你把 npm run 构建放在哪里?我是否替换了 start 属性中的值?我已经用 package.json 更新了帖子

<代码>{名称":电子应用程序"，版本":1.0.0"，描述":电子"，主":index.js"，脚本":{构建":tsc"，<--------------开始":电子."},开发依赖":{电子":^5.0.1"，打字稿":^3.5.1"},依赖":{lodash":^4.17.11"}}

从那里您可以从命令行执行 npm run build，这相当于执行 ./node_modules/.bin/tsc.

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).

解决方案

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

1. Keep your main pointing at index.js.
2. Transpile your TypeScript.
3. 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.

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