электронное приложение зависало при импорте файла

Question

---

РЕШЕНИЕ (хотя я все равно ЛЮБЛЮ объяснение)

если я включу код интерфейса напрямую (без импорта) в ТОП файла preload.ts, все работает хорошо. Я могу привести к объектам, как я ожидал.

---

У меня есть электронное приложение, скомпилированное для машинописи. У меня есть main.ts и preload.ts, как показано в примере здесь . Когда я импортирую файлы в preload.ts, приложение падает там, где используется импорт. Что я здесь не так делаю?

Ошибка говорит:

api не определено

, что совершенно неверно, поскольку код работает отлично, если импорт CandleRes удалены по отмеченным линиям ниже.

После некоторого тестирования я обнаружил, что:

• Кажется, что сам оператор import не вызывает проблем. Когда я удаляю импорт и помещаю интерфейсы непосредственно в файл, я все равно получаю ту же ошибку

• Когда я включаю интерфейс путем копирования и вставки в файл preload.ts ( внизу) файл вылетает независимо от того, делаю я ссылку на интерфейс

main.ts

import { app, BrowserWindow } from "electron";
import * as path from "path";

let mainWindow: Electron.BrowserWindow;

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    },
    width: 800
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, "../index.html"));

}

app.on("ready", createWindow);

app.on("activate", () => {
  // On OS X it"s common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

preload.ts

import { CandleRes } from "./models"; //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<THIS LINE CAUSES CRASH
let api: any;

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.

window.addEventListener("DOMContentLoaded", async () => {
  replaceText("colnames", "Loading data...."); //<<<<<<<<<<THIS FIRES CORRECTLY
  setupApi(); //Omitted to save space. This inits the var api
  await getDataAsync();
});

async function getDataAsync() {
  try {
    let candles: CandleRes = ( //<<<<<<<<<<<<<<<<<<<<<<<<<<<<I attempt to use import here. App crashes
      await this.api.getCandles("USD_CAD", {
        granularity: "M5",
        count: 1
      })
    ).data;
    replaceText("currencies", candles + " string: " + JSON.stringify(candles));
  } catch (e) {
    replaceText("currencies", "currencies ERR: " + e);
  }
}
const replaceText = (selector: string, text: string) => {
  const element = document.getElementById(selector);
  if (element) {
    element.innerText = selector + ":" + text;
  }
};
function setupApi() {
  var key = "xxxxxxxxxxxxxxxxxxxxxxx"; //https://www.oanda.com/demo-account/tpa/personal_token
  var acctid = "xxx-xxx-xxx-xxx"; //https://www.oanda.com/demo-account/funding
  const Oanda = require("oanda-node-api");

  const config = {
    env: "fxPractice",
    auth: `Bearer ${key}`,
    accountID: acctid,
    dateFormat: "RFC3339"
  };

  this.api = Object.create(Oanda);
  this.api.init(config);
}

models.ts

export interface OHLC {
  o: string; // "1.34288"
  h: string; //"1.34336"
  l: string; //1.34278"
  c: string; //1.34315"
}

export interface Candle {
  complete: boolean; //true
  volume: number; //283
  time: string; //2020-02-28T17:50:00.000000000Z
  mid: OHLC;
}

//{"instrument":"USD_CAD","granularity":"M5",
//"candles":[
//{"complete":true,"volume":90,"time":"2020-02-28T21:55:00.000000000Z",
//"mid":{"o":"1.33974","h":"1.33974","l":"1.33932","c":"1.33968"}}]}
export interface CandleRes {
  instrument: string; //ex: "USD_CAD"
  granularity: string; //ex "M5"
  candles: Candle[];
}

Answer 1

Ваша переменная api объявлена ​​в глобальной области видимости, и вы пытаетесь обратиться к ней внутри функций, используя this.api, что неверно. Просто посмотрите, как в электронном примере mainWindow используется в вашем main.ts.

. Вы делаете это один раз в getDataAsync() и дважды в setupApi(). Измените все свои this.api на api, и эта конкретная проблема должна исчезнуть.

Если вы хотите расширить знания в этой области, вот отличная статья: 'this' в TypeScript