Electron - не может прочитать свойство undefined - когда находится вне функции - PullRequest
Новая
       6

Electron - не может прочитать свойство undefined - когда находится вне функции

0 голосов
/ 28 июня 2018

Я попытался прочитать различные объяснения, и я не могу точно выяснить, в чем причина этой ошибки.

Я создаю проект ElectronJS (в Typescript ). У меня есть стандартные файлы, main.ts в качестве точки входа и index.html в качестве главной страницы. Я также добавил файл renderer.ts, который должен содержать код для процессов рендеринга, и включен через -tags в мой index.html.

main.ts 

import { app, BrowserWindow, ipcMain, Tray, Menu } from "electron";
const url = require('url');
var path = require('path');
const renderer = require('./app/ts/renderer.ts');

class MainWindow {

  mainWindow: any;

  constructor() {

  }

  public CreateWindow(): any {
    this.mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
    });

let trayIcon = new Tray('src/app/img/logo.png');

const trayMenuTemplate: any = [{
  label: 'Empty Application',
  enabled: false
},
{
  label: 'Show App',
  click: () => {
    this.mainWindow.show();
  }
},
{
  label: "Hide App",
  click: () => {
    this.mainWindow.hide();
  }
},
{
  label: 'Quit',
  click: () => {
    (<any>app).isQuitting = true;
    app.quit();
  }
}, {
  label: 'Settings',
  click: function () {
    console.log("Clicked on settings")
  }
},

{
  label: 'Help',
  click: function () {
    console.log("Clicked on Help")
  }
}
];

let isMinimized: boolean;

trayIcon.on('double-click', (event) => {
  event.preventDefault();
  if (!isMinimized) {
    this.mainWindow.minimize();
    isMinimized = true;
  } else {
    this.mainWindow.show();
    isMinimized = false;
  }
});

let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
trayIcon.setContextMenu(trayMenu)

this.mainWindow.on('close', () => {
  if (!(<any>app).isQuitting) {
    this.mainWindow = null;
  }
});

this.mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, '/app/index.html'),
  protocol: 'file'
}));

this.mainWindow.on('minimize', (event: any) => {
  event.preventDefault();
  this.mainWindow.minimize();
});
  }
}

ipcMain.on('render-async-reply', (event: any, arg: any) => {
  console.log("I got a pong from a render-process: " + arg);
});

ipcMain.on('async', (event: any, arg: any) => {
  console.log("ipcMain.on(async): " + arg);
  event.sender.send('async-reply', 'pong');
});

ipcMain.on('httpOK', (event: any, arg: any) => {
  console.log("MainProcess: I got a httpOK from the renderer: -->" + arg);
});

let mw = new MainWindow();
app.on('ready', mw.CreateWindow);

index.html 

<!DOCTYPE HTML>
<html>
<head>
  <title>DukaBackup SuperClient</title>
  <script src="./ts/renderer.ts"></script>
</head>

<body>
  <button id="button1" onclick="clickMe()"> Click Me </button>
  <textarea id ="textarea1" rows="4" cols="50">
    This text should be replaced, if the request is successful
  </textarea>
  <button id="button2" onclick="clickThat()">Click for IPC </button>

</body>

</html>

renderer.ts 

const { ipcRenderer } = require('electron');
const request = require('request');

// Вот проблема 

function clickThat(){
  ipcRenderer.on('async-reply', (event:any, arg:any) => {
  console.log("ipcRenderer: " + arg)
  event.sender.send('render-async-reply', 'I got your pong')
  })

  ipcRenderer.send('async', 'ping')
}


function clickMe() {
  request({url: 'http://justanurl:6666/swagger/this/is/an/api', qs: {"useWatchers": "false"},  json: true }, (err:any, res:any, body:any) => {  
    if (err) 
    { 
      return console.log(err); 
    }
    console.log(body);
    ipcRenderer.send('httpOK', res.statusCode);       
    let ta1:HTMLElement = <HTMLElement> document.getElementById("textarea1");
    ta1.innerHTML = body;
  }); 
  console.log("I've been clicked man!");  
};

Я продолжаю получать «Невозможно прочитать свойство» для «неопределенного» * ​​1028 *, если я удаляю окружающее function clickThat(), но оставляю тело функции неизменным. Я не получаю ошибку, если я не использую импорт / требует. Я также избегаю ошибок, сохраняя обработчики событий в функции.

  • Почему в этом случае не может быть обработчик событий вне функции?

  • Что именно импорт / требуется сделать для файла?

Кажется, что он отлично работает с main.ts. Я надеюсь, что кто-то может пролить некоторый свет на это, особенно для того, чтобы углубить мое понимание внутренней работы javascript / typcript, а также Electron.

...