另一个迁移..对不起ð
我知道，这是您想看的最后一件事。但是我希望这将是最后一个重大的！自从上一个post中迁移到电子js以来，我们的代码基本上已分为两个部分：
- node.js代码
- 铬浏览器代码
铬代码包含负责显示我们的计时器的前端（vue.js的东西）。 Node.js代码负责我们与操作系统的通信。但是，Node.js处理模块的导入与为Chromium浏览器提供动力的V8发动机的导入。不仅如此，而且两者之间的许多API都不同。
由于这种迁移，我们的代码开始变得有些混乱，并且到处都是。此外，在Node.js API和Chromium浏览器API之间共享代码，而不必担心导入策略的纠缠将是很不错的。因此，我认为将我们的应用迁移到TypeScript！
是明智的。迁移到打字稿
再次，我真的不想浏览每个的单一更改。您必须检查GitHub repo。
明显的变化
我们要做的第一件事是将所有.js文件扩展名更改为.ts。接下来，我们需要运行npm i --save-dev typescript ts-node来安装所需的软件包。
这些更改似乎很明显，但我认为接下来的几个更改可能对从Vite + Vue 3 + Electron.js Vanilla JavaScript应用程序迁移到打字稿版本更有帮助。
主要变化
我们的forge.config.ts文件中发生了很多更改。我们将把很多代码切换到模块导入：
// forge.config.ts
// Taken from https://github.com/caoxiemeihao/electron-forge-vite/blob/main/vite-typescript/tmpl/forge.config.ts
import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { VitePlugin } from '@electron-forge/plugin-vite';
const config: ForgeConfig = {
packagerConfig: {},
rebuildConfig: {},
makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
plugins: [
new VitePlugin(
{
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
// If you are familiar with Vite configuration, it will look really familiar.
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: 'src/main/main.ts',
config: 'vite.main.config.mts',
},
{
entry: 'src/main/preload.ts',
config: 'vite.preload.config.mts',
},
],
renderer: [
{
name: 'main_window',
config: 'vite.renderer.config.mts',
},
],
}),
],
};
export default config;
我们需要做出的另一个重大更改是在我们的main.ts文件的顶部公开某些类型：
// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite
// plugin that tells the Electron app where to look for the Vite-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
declare const MAIN_WINDOW_VITE_NAME: string;
最后，我们只想在index.html文件中重定向我们的渲染器参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Speedrun Timer</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/renderer/renderer.ts"></script>
</body>
</html>
最终更改
除此之外，大多数剩余的代码更改都会修改node.js代码以使用import语句而不是require，还将声明类型添加到我们的代码中，并明确告知vue文件以通过<script setup lang="ts">中的脚本代码在脚本代码中使用Typescript。 /p>
这是我们的tsconfig.json供参考：
{
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "node",
"target": "ESNext",
"outDir": "../../dist",
"strict": true,
"sourceMap": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"declaration": true,
"skipLibCheck": true
},
"include": ["**/*.ts", "vite.renderer.config.mts", "vite.renderer.config.mts", "vite.preload.config.mts", "vite.preload.config.mts", "vite.main.config.mts", "vite.main.config.mts"]
}
结论
很难弄清楚如何迁移此项目打字稿，因为我的特定配置似乎没有很多文档。希望有人会发现这有用。我想大喊这个repo，以指导我如何实现这一目标。
如果您需要详细的更改列表，则可以查看here。
更新：在follow-up change中，我们修复了一些IDE问题并添加了一个Linter。
下一章我们将最终写下新的东西，而不是迁移所有内容！