在 Electron 和 TypeScript 中构建桌面应用程序

阅读时长 9 分钟读完

介绍

在现代化的应用程序和可执行文件中,桌面应用程序一直扮演着一个非常重要的角色。现在,随着越来越多的应用向云端迁移,一些独立的桌面应用程序,如文本编辑器、功能强大的音频编辑器和其他工具,无论在操作方面还是在性能方面,仍然是有利可图的。在构建这些桌面应用程序时,有一些流行的框架和库,包括 Electron 和 TypeScript。在本篇文章中,我们将学习如何有效地使用这些技术来构建高质量的桌面应用程序。

Electron 简介

Electron 是一个流行的桌面应用程序框架,基于 Chromium 和 Node.js。可以用 HTML、CSS 和 JavaScript 构建桌面应用程序,类似于一个标准化的浏览器。Electron 优化了从网页到桌面应用程序的转换,在不失去任何浏览器功能的同时,为应用程序开发人员提供了良好的灵活性。

在 Electron 中,您可以使用Web技术开发应用程序,包括HTML、CSS、JavaScript和Node.js的模块,并在同一时间内访问操作系统资源。这使得您可以构建出复杂且功能强大的桌面应用程序。Electron 已经被广泛应用于像 Visual Studio Code、Slack、GitHub Desktop、WhatsApp 桌面应用程序等的构建。

TypeScript 简介

TypeScript 是 JavaScript 的超集,通过为 JavaScript 增加类型注释和其他一些特性来改进它。随着时间的推移,我们需要更加严格和安全的代码,这使得TypeScript越来越受欢迎。更重要的是,许多流行的框架和库,如 Angular 和 React,现在也支持 TypeScript。

TypeScript 对于大型项目来说尤其有用。这样做可以提高代码的可读性,更快地发现错误,并提高应用程序的可维护性。此外,VS Code 和 WebStorm 等 IDE 也支持 TypeScript,并提供智能的代码提示、错误检测和自动代码重构。

使用 Electron 构建桌面应用程序

在这个部分中,我们将学习如何使用 Electron 快速构建桌面应用并为其添加 TypeScripts 支持。我们使用的操作系统是 macOS:

安装 Electron

我们将使用 Node.js 模块管理器 npm 安装 Electron。命令如下:

创建一个基本的 Electron 应用程序

我们将创建一个简单的 Electron 应用程序。在您选择的位置创建一个新的目录,并使用 npm 初始化该目录。

现在,我们使用你最喜欢的代码编辑器打开该目录,创建以下文件:

-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
  ------
    ----- ----------------
    ------------ --------------
  -------
  ------
    --------- -----------
    -- --- ----- ------- -------------------------------------------------------
    -------- ---------------------------------------------------------
    --- -------- -----------------------------------------------------------
  -------
-------
-- -------------------- ---- -------
-- --------
----- - ---- ------------- - - -------------------
----- ---- - ---------------

-------- ------------ -- -
  ----- --- - --- ---------------
    ------ ----
    ------- ----
    --------------- -
      -------- -------------------- -------------
    -
  --

  --------------------------

  ------------------------------
-

----------------------- -- -
  --------------

  ------------------ -- -- -
    -- ------------------------------------- --- -- -
      --------------
    -
  --
--

--------------------------- -- -- -
  -- ----------------- --- --------- -
    ----------
  -
--

现在,我们可以使用以下命令从终端运行我们的应用程序:

这应该会启动一个新的应用程序窗口,其中应该包含一个标题为“Hello World!”的简单网页。我们现在可以使用主进程 Node.js 更改窗口的大小、位置等属性。这个例子是一个非常简单的开始步骤,一旦我们习惯了 Electron 之后,我们可以尝试进一步的开发和工程。

使用 TypeScript 支持

现在我们将为我们的 Electron 项目添加 TypeScript 支持。让我们首先安装 TypeScript:

要启用 TypeScript 支持,请在根目录下创建一个 tsconfig.json 文件并添加以下内容:

-- -------------------- ---- -------
-
  ------------------ -
    ------------------ -----
    --------- -----------
    --------- ------
    --------- -------
    ------------ ----
  --
  ---------- -
    --------------
  -
-

现在,我们可以将我们的 JavaScript 文件改为 TypeScript 文件:

-- -------------------- ---- -------
-- --------
------ - ---- ------------- - ---- ----------
------ - -- ---- ---- ------

-------- ------------ -- -
  ----- --- - --- ---------------
    ------ ----
    ------- ----
    --------------- -
      -------- -------------------- -------------
    -
  --

  --------------------------

  ------------------------------
-

----------------------- -- -
  --------------

  ------------------ -- -- -
    -- ------------------------------------- --- -- -
      --------------
    -
  --
--

--------------------------- -- -- -
  -- ----------------- --- --------- -
    ----------
  -
--

这里我们改为使用 import 引入 electron 和 path 而不是使用 require 了。如果您希望在代码内使用 require 函数,需要添加以下内容 import require:

现在,我们需要使用 TypeScript 编译器编译这些 TypeScript 文件。如果您使用 Electron 12 及更高版本,您需要安装针对您应用程序的 electron 包。如果你使用 Electron 11 或更低版本,electron 中已经包含了 @types/electron 类型定义。安装它们:

现在,我们需要一个 npm 脚本来生成 JavaScript 文件。你可以在你的 package.json 文件中添加以下脚本:

该脚本将使用 TypeScript 编译器来编译所有 TypeScript 文件。执行以下命令,您的 TypeScript 文件将被编译到 /dist 目录下:

然后我们开启我们的Electron应用:

如此,您的 Electron 项目现在可以使用 TypeScript 开发。

总结

在本文中,我们学习了 Electron 和 TypeScript,以及如何在桌面应用程序中使用它们。我们从创建一个简单的 Electron 应用程序开始,然后向其添加了 TypeScript 支持。在您深入学习本地应用程序和 TypeScript 后,这些工具可以帮助您构建功能强大的桌面应用程序。

示例代码

本文的示例代码可以在 GitHub 中找到。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a53f6f48841e98941c199d

纠错
反馈