使用 TypeScript 搭建基于 Vue 的项目

前言

Vue.js 是一个流行的 JavaScript 框架，它提供了许多工具和组件，使开发人员可以轻松地创建交互性和响应式的 Web 应用。TypeScript 是一个强类型语言，它为 JavaScript 提供了许多有用的功能和语言特性，例如类型检查和面向对象编程。使用 TypeScript 可以帮助我们在开发 Vue.js 应用时避免一些潜在的问题，提高代码质量和可维护性。

在本文中，我们将介绍如何使用 TypeScript 搭建基于 Vue 的项目，并提供一些例子和最佳实践。

准备工作

要开始使用 TypeScript 开发 Vue.js 应用，您需要满足以下要求：

  • Node.js 和 npm （或 yarn）

  • Vue CLI：一个用于创建和管理 Vue.js 项目的命令行工具。您可以使用以下命令安装 Vue CLI：

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

    或

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

现在，我们已经准备好开始创建一个新的 Vue.js 项目了。

创建项目

到这里您已经安装好了 Vue CLI，接下来我们需要创建一个新的项目。在您喜欢的目录下打开命令行，然后运行以下命令：

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

在运行该命令时，Vue CLI 将提示您选择一种预设。一个预设是包含了一组默认插件和配置的模板。在这里，我们选择 Manually select features（手动选择特性），这样我们就可以自定义项目的配置。

接下来，Vue CLI 将按照我们的选择安装必需的依赖并创建一个 Vue.js 项目。在项目创建之后，我们可以打开项目并测试一下它是否工作正常。使用以下命令：

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

该命令将编译并启动本地开发服务器。当编译完成后，在浏览器中打开 URL http://localhost:8080，如果一切正常，那么您将在屏幕上看到 Vue.js 的默认欢迎页面。

集成 TypeScript

现在我们已经成功创建了一个 Vue.js 项目，接下来我们需要集成 TypeScript。幸运的是，Vue CLI 为我们提供了一个可用的插件，可以帮助我们在几分钟内将 TypeScript 添加到项目中。

我们需要使用以下命令安装 @vue/cli-plugin-typescript：

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

该命令将添加 TypeScript 依赖项、配置文件和一个空的 TypeScript 文件到我们的项目中。

TypeScript 配置

在完成上面的步骤之后，我们需要做一些修改以确保 TypeScript 正确地与 Vue.js 集成。让我们打开 tsconfig.json 文件并修改如下：

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

让我们逐一解释所有选项：

  • target：将编译的代码目标设置为 esnext。
  • module：设置模块类型为 esnext。
  • strict：启用严格模式，以启用所有的类型检查选项。
  • jsx：在 .tsx 文件中允许使用 JSX 语法。
  • moduleResolution：设置模块解析策略为 node。
  • esModuleInterop：启用 ES 模块兼容性。
  • skipLibCheck：跳过检查 node_modules 中的类型定义文件。
  • forceConsistentCasingInFileNames：在文件名和路径中使用一致的大小写。
  • noImplicitThis：禁止隐式 any 类型的 this 值。
  • noImplicitAny：要求显式地给出所有的 any 类型。
  • noImplicitReturns：禁止缺少函数返回值。
  • declaration：生成类型声明文件。
  • sourceMap：生成调试源代码的 source maps。
  • baseUrl：用于解析非相对模块名称的基本目录路径。

特别地，这里我们使用了 skipLibCheck 选项来跳过检查 node_modules 中的类型定义文件。这是因为 node_modules 中的类型定义文件通常比较复杂，且通常已经在声明文件中进行了类型转换。使用 skipLibCheck 选项可以大大减少你的编译时间。

TypeScript 文件

下一步是创建我们的第一个 TypeScript 文件。让我们在 src 目录下创建一个名为 main.ts 的文件。然后将内容改为以下：

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

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

这里，我们导入了 Vue 和 App 组件。我们同时创建了一个新的 Vue 实例并将其绑定到 #app 元素上。

在 App.vue 文件中，需要将 .js 文件改为 .ts 并添加类型声明：

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

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

在上面的代码中，我们使用了 vue-property-decorator 库来帮助我们定义组件。我们将 App 组件中的 msg 属性的类型设置为字符串，并将其初始值设置为 Hello, TypeScript!。

TypeScript 和 Vue.js 组件

接下来，我们将介绍一些有用的技巧来帮助您使用 TypeScript 开发 Vue.js 组件。

Prop 类型检查

使用 TypeScript，我们可以为组件中的属性定义类型。在 App.vue 组件中，我们添加一个名为 title 的属性并将其类型设置为字符串。

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

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

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

正如上面所示，我们使用了 @Prop 装饰器来定义 title 属性的类型。我们将其类型设置为 String，因为它是一个字符串。

计算属性

我们可以使用 TypeScript 定义组件的计算属性。让我们在组件中添加一个名为 fullName 的计算属性，它将返回 this.firstName 和 this.lastName 的拼接字符串。

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

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

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

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

在这里，我们使用了 get 访问器来定义计算属性。我们将 fullName 的类型设置为字符串，因为它返回一个字符串。

添加事件

我们可以使用 TypeScript 定义事件处理程序。让我们添加一个按钮并在单击时调用一个方法。

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

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

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

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

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

在这里，我们创建了一个名为 onClick 的方法，并为其添加了事件处理程序。我们使用 void 来指示该方法不返回任何内容。

使用 Vuex

如果您使用 Vuex 管理组件状态，那么您需要了解如何将其与 TypeScript 集成。

首先，让我们创建一个名为 store.ts 的文件并设置其内容。

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

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

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

在上面的代码中，我们创建了一个基本的 Vuex Store，并定义了状态、mutations、actions 和 getters。

接下来，打开 main.ts 并使用以下代码导入我们的 store.ts 文件。

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

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

最后，让我们在 App.vue 组件中使用在 Vuex Store 中定义的计算属性。

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

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

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

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

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

在这里，我们导入了 vuex-class 库，使用 @Getter 装饰器定义了 count 计算属性。我们还使用了 @Action 装饰器来定义 increment 方法。在单击按钮时，我们会调用该方法以增加 count 的值。

结论

在本文中，我们介绍了如何使用 TypeScript 搭建基于 Vue.js 的项目。我们从创建项目开始，并介绍了如何集成 TypeScript。我们还介绍了一些有用的技巧，例如为组件属性定义类型、定义计算属性和事件处理程序、以及如何使用 Vuex 管理应用程序状态。

尽管 TypeScript 可以帮助我们编写更安全、更可靠的代码，但它并不是万能的。在使用 TypeScript 开发 Vue.js 应用之前，您需要了解 TypeScript 的基础知识和 Vue.js 的基础知识，这样您才能充分利用这两个工具所提供的功能。

我们希望这篇文章能够帮助您更好地理解如何使用 TypeScript 开发 Vue.js 应用，也希望您能从中获得一些有用的技巧和最佳实践。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719e1f69b4aadf9e0067cf7

阅读全文

精选内容

相关推荐

    暂无