Estoy experimentando con Electron y estaba tratando de cargar un archivo html, y guardo la ruta a ese archivo en una variable privada. Consulte el código a continuación.
Sin embargo, Path.join falla con este error:

PERO si paso un literal de cadena con el mismo valor, funciona.
Código que no funciona:
import * as Electron from 'electron' import * as Path from 'path' import { Option, Some, None } from './option' export default class Main { private indexFilePath = 'index.html' private app: Electron.App private browserWindow: Option<Electron.BrowserWindow> constructor (app: Electron.App) { this.app = app this.browserWindow = new None() this.app.on('ready', this.onReady) } private onReady(): void { this.browserWindow = new Some(new Electron.BrowserWindow({ width: 800, height: 600 })) this.browserWindow.unwrap().loadFile(Path.join(__dirname, this.indexFilePath)) } }Código de trabajo:
import * as Electron from 'electron' import * as Path from 'path' import { Option, Some, None } from './option' export default class Main { private app: Electron.App private browserWindow: Option<Electron.BrowserWindow> constructor (app: Electron.App) { this.app = app this.browserWindow = new None() this.app.on('ready', this.onReady) } private onReady(): void { this.browserWindow = new Some(new Electron.BrowserWindow({ width: 800, height: 600 })) this.browserWindow.unwrap().loadFile(Path.join(__dirname, 'index.html')) } }Esto no tiene ningún sentido para mí y solo aumenta mi frustración con cualquier cosa que tenga javascript. Se siente como un avión supersónico loco que podría destruirse a sí mismo en cualquier momento...
Verifiqué si se trataba de un extraño error de compilación de mecanografiado, pero no, no importa qué versión de JavaScript elija, el resultado es el mismo. El código compilado se ve así, tampoco le veo nada malo:
class Main { constructor(app) { this.indexFilePath = 'index.html'; this.app = app; this.browserWindow = new option_1.None(); this.app.on('ready', this.onReady); } onReady() { this.browserWindow = new option_1.Some(new Electron.BrowserWindow({ width: 800, height: 600 })); this.browserWindow.unwrap().loadFile(Path.join(__dirname, this.indexFilePath)); } }Error de alcance clásico: el hecho de que esté ready a partir de this no significa que this.ready tenga un alcance definido, es solo una función básica.
Entonces, cuando llamas a this.app.on('ready', this.onReady) , no le estás diciendo a JS que conserve el significado de this palabra clave en el momento de la declaración. En cambio, cualquier uso de this que encuentre JS una vez que ejecute su función será "cualquiera que sea el alcance en el momento de la ejecución ", y cuando se active el código de manejo de eventos, ese será el alcance global en lugar de su instancia de clase.
Solución bastante simple: esto es para lo que inventamos las funciones de flecha.
this.app.on('ready', () => this.onReady()) Listo, cuando se ejecuta this función, sigue siendo la misma que en el momento de la declaración.