Вам потребуются четыре вещи: package.json, tsconfig.json, index.ts и index.html.
Мой пример основан на учебнике Electron и сообщение в блоге о работе с Electron и TypeScript .
. package.json необходимо ввести зависимости Electron и TypeScript, запустить сборку TypeScript и запустить Electron.
{
"name": "electron-ts",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"prestart": "tsc",
"start": "electron ."
},
"devDependencies": {
"electron": "8.0.1",
"typescript": "3.7.5"
}
}
Предварительный сценарий компилирует TypeScript и запускает Electron, используя проект в качестве каталога приложения. Я не знаю минимальной необходимой версии TypeScript, но это что-то 3.
tsconfig.json необходимо установить некоторые параметры компилятора и определить, что собирать при запуске tsc.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": ["node_modules"]
}
Это скомпилирует любые файлы TypeScript, которые он найдет за пределами node_modules, и сгенерирует JavaScript рядом с ними.
index.ts необходимо создать окно браузера и загрузить целевую страницу.
import { app, BrowserWindow } from 'electron';
function createWindow () {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.allowRendererProcessReuse = true;
app.whenReady().then(createWindow);
Это некоторый шаблонный код для запуска Electron, все типы включены.
Наконец, index.html должен отобразить то, что вы можете распознать.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Это будет отобразить версии узлов, Chrome и Electron.
При наличии этих файлов в одном каталоге запуск npm start должен скомпилировать TypeScript и запустить приложение Electron.