環境構築にはこちらを使用
https://github.com/electron/electron-quick-start-typescript
src/main.tsでメインプロセスの処理。windows作成時にindex.htmlが読み込まれ、src/renderer.tsが読み込まれる。
$ tree -l 1 -I node_modules .
.
├── LICENSE.md
├── README.md
├── dist
│ ├── main.js
│ ├── main.js.map
│ ├── preload.js
│ ├── preload.js.map
│ ├── renderer.js
│ └── renderer.js.map
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── main.ts
│ ├── preload.ts
│ └── renderer.ts
├── tsconfig.json
└── yarn.lock
index.htmlにbuttonを追加。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
</head>
<body>
<input id="csvLoad" type="button" value="読み込み"/>
<!-- You can also require other files to run in this process -->
<script src="./dist/renderer.js"></script>
</body>
</html>
src/renderer.tsでbuttonのonClickに処理を追加。
src/renderer.ts
document.getElementById('csvLoad').onclick = () => {
console.log('aaaaaa')
}
結果
