typescript - Fixa Cannot read properties of undefined-fel i electron-app som använder quasar

Jag arbetar för närvarande på en liten app med quasar-cli-setupen med electron.

Min electron-preload.ts ser ut så här:

import { contextBridge} from 'electron'
import alasql from 'alasql'

contextBridge.exposeInMainWorld('Electron', {
  importdata: () => importCsv()
})

export function importCsv () {
  console.log('we get here')
  return alasql.promise('SELECT * FROM CSV("/Users/niki/example_data.csv", {headers:true, seperators:","})')
    .then(function (data) {
      return data
    })

I min MainLayout.vue anropar jag det så här:

const firstimport = window.electronApi.importdata()

Jag fortsätter sedan att använda löftet för någon vidare operation som alla får felet kan inte läsa egenskaper av undefined. Jag får också fel i VSCode att .electronApi inte finns. Bokstavligen samma sak fungerade i min Electron-app som inte skapades med quasar-cli, så jag är inte säker på vad jag gör fel.

Min fönster skapas också så här, om det är relevant:

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      sandbox: false,
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

  mainWindow.loadURL(process.env.APP_URL)

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow?.webContents.closeDevTools()
    })
  }

  mainWindow.on('closed', () => {
    mainWindow = undefined
  })
}

Svar #1

Okej, efter att ha hållits uppe av detta hela natten och tittat på olika projekt och den gamla mallen jag använde hittade jag mitt fel. För det första hade jag ett stavfel i electronAPI när jag kallade på det. För det andra, för att få syntaxfelen i VSCode att försvinna behöver jag följande fil:

global.d.ts i min src-mapp (renderer-mappen)

import alasql from 'alasql'

/**
 * Should match main/preload.ts for typescript support in renderer
 */
export default interface electronAPI {
  sendMessage: (message: string) => void
  importdata: () => any
}

declare global {
  interface Window {
    electronAPI: ElectronAPI,
  }

}