ELECTRON + TypeScript 사용해 보기(1)

electron과 javascript로 데스크톱 앱을 개발하다 TypeScript를 적용해보기로 했다.

 

TypeScript 개발 환경을 만들어 본 적이 없어서 겪은 시행착오를 남겨봅니다.

 

 

1. electron-quick-start-typescript

 

TypeScript에 대해서 하나도 모르기 때문에 electron에서 제공하는 예제를 그대로 사용!

 

https://github.com/electron/electron-quick-start-typescript

electron/electron-quick-start-typescript

 

2. vscode 디버깅 환경 설정

 

 

package.json에 main 속성이 없어서 발생하는 문제입니다. 

 

"main": "./dist/main.js",

 

확인해보고 없으면 추가해줍니다.

 

 

 

 

2022년 10월 6일 현재 electron 21.0.1에서는 아래와 같은 문제는 없습니다.

 

3. renderer process

 

renderer.ts에 코드를 작성하면 다음과 같은 에러가 발생합니다.

 

 

main.ts에서 mainWindow 만들 때 nodeIntegration과 contextIsolation 옵션을 추가합니다.

 

 
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      
      // 새로 추가.
      nodeIntegration:true, 
      contextIsolation : false 
    },
    width: 800,
  });
  

 

그리고, preload.ts 맨 위에 다음을 추가합니다.

 

global.exports = {};

 

이유는 무엇인지 모르겠고 이 이슈가 있는데 수정은 안 된 것 같습니다.

 

https://github.com/electron/electron-quick-start-typescript/issues/27

Uncaught ReferenceError: exports is not defined · Issue #27 · electron/electron-quick-start-typescript

 

 

일단, 위의 2가지만 수정하면 TypeScript를 사용할 수 있습니다.

 

다음에는 html, css 파일의 경로 설정을 다뤄보겠습니다.