使用 TypeScript 搭建基于 Vue 的项目

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

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

阅读全文

猜你喜欢

  • Headless CMS 的 SEO 最佳实践及常见问题解决方式

    Headless CMS（无头 CMS）是一种将内容管理系统（CMS）中的内容与展示分离的一种方式。这种方法使得开发人员可以更好地控制网站的展示方式，使得网站更具可扩展性和可定制性。

    18 天前
  • GraphQL 中的数据模型设计技巧

    GraphQL 是一种有效的数据查询语言，通过定义具有强类型的数据模型来表示不同应用程序中的数据。在 GraphQL 中，一个数据模型就是一组新数据类型和这些类型的字段。

    18 天前
  • RxJS 实现异步请求合并：concatMap 和 mergeMap 操作符的使用

    RxJS 是一个基于观察者模式的响应式编程库，常用于处理异步数据流。在前端开发中，我们经常需要对多个异步请求进行合并，以提高效率和性能，RxJS 提供了 concatMap 和 mergeMap 操作...

    18 天前
  • Angular 的模块和组件的生命周期

    在 Angular 中，模块和组件都具有生命周期，也就是在它们被创建、渲染和销毁的过程中，会触发一系列事件，开发者可以通过这些事件进行一些自定义的操作。本文将详细介绍 Angular 的模块和组件的生...

    18 天前
  • 利用 Web Components 技术优化前端性能的实践经验

    在大型 Web 应用中，前端性能是很重要的一方面。Web Components 技术可以帮助我们有效地优化前端性能。本文将介绍 Web Components 技术的基础知识及其在优化前端性能方面的实践...

    18 天前
  • Serverless 架构中的 API 设计技巧详解

    Serverless 架构越来越流行，它提供了一种新的构建和部署应用程序的方式，它将大部分服务管理和运维的工作交给了云服务商，使开发人员能够更快地开发和部署应用，保持高可扩展性和高可靠性。

    18 天前
  • React Native 中的生命周期方法指南

    React Native 是 Facebook 开源的一个框架，用于构建跨平台移动应用程序。React Native 采用了基于组件的设计模式，其组件可以定义一些生命周期方法来管理组件的状态和行为。

    18 天前
  • Express.js 应用程序的缓存控制和静态资源管理

    Express.js 是一个基于 Node.js 平台的极简、灵活的 Web 应用程序框架，在前端开发中得到广泛应用。本文将介绍在 Express.js 应用程序中如何进行缓存控制和静态资源管理。

    18 天前
  • React + Redux + React Router 集成总结

    React、Redux 和 React Router 是前端开发中非常流行的技术栈。React 作为一个高效的 UI 框架，Redux 作为状态管理库，而 React Router 则是使用 Reac...

    18 天前
  • PWA 的实际应用 —— 篇一

    近年来，PWA 技术越来越受到前端开发者的关注。PWA（Progressive Web App，渐进式 Web 应用）是一种利用 Web 技术开发的符合 PWA 标准的 Web 应用，具有类似原生 A...

    18 天前
  • Cypress 实现网页性能测试的最佳实践和优化技巧

    Cypress 实现网页性能测试的最佳实践和优化技巧 随着互联网的发展，网页性能已经成为了一个非常重要的指标。一些糟糕的网站性能会影响用户的体验，甚至会影响业务的运转。

    18 天前
  • 如何在 Koa2 中使用 WebSocket 实现实时聊天

    随着互联网技术的发展，实时通信在 web 应用中变得越来越重要。实时通信指用户之间的交流，比如聊天、游戏等，这些场景需要实时性较高且消息的传输不可靠，因此需要使用 WebSocket 技术来实现。

    18 天前
  • 如何使用 Hapi 和 Boom 实现 RESTful API 的错误处理

    RESTful API 经常会被开发者用来构建前端应用，因为它可以提供简单、可伸缩的接口，但是当出现错误时，必须要有很好的错误处理机制。在本文中，我们将学习如何使用 Hapi 和 Boom 库来实现 ...

    18 天前
  • Node.js 中的异常处理

    作为一名前端开发人员，在 Node.js 中，异常处理是一项十分重要的技能。Node.js 中的异常处理不仅可以帮助开发人员更好地监控应用程序的健康状况，同时也可以提高代码质量和开发效率。

    18 天前
  • 在 Node.js 中使用 TypeScript 的指南

    TypeScript 是一种强类型的 JavaScript 超集语言，它支持静态类型检查和更好的代码提示，并且能够将 TypeScript 编译成纯 JavaScript 代码以在浏览器中运行。

    18 天前
  • Node.js 中的 Promise 如何使用和处理错误

    简介 在 Node.js 中，Promise 是一种流行的异步编程机制，它可以帮助开发人员更有效地管理异步操作。Promise 提供了一种优雅的方式来组织和处理异步代码，消除了传统的回调嵌套问题。

    18 天前
  • 详解如何在网页中使用 LESS

    前言 LESS 是一种 CSS 预处理器，它能够让 CSS 代码更加优雅和易于管理。相比于原始 CSS，LESS 提供了一些更强大和灵活的语言特性，如变量，函数和嵌套规则等。

    18 天前
  • 在 Jest 中使用 DOM 测试

    什么是 Jest？ Jest 是一个由 Facebook 开发的 JavaScript 测试框架，用于编写自动化测试和快照测试。它易于配置、易于使用，并集成了断言库、mock 库和代码覆盖率报告工具，...

    18 天前
  • 使用 GraphQL 创建可扩展的 WebHook 服务

    WebHook 服务是一种使网站、应用和服务之间自动同步的方法。使用 WebHook，当一个特定事件发生时，如发表文章或创建新用户，会自动向另一个应用程序发送 HTTP 请求，通常会包含 JSON 格...

    18 天前
  • ES11-null 性合并操作符和数字互操作性

    ES11-null 合并操作符和数字互操作性 在 ES11 中，一个令人兴奋的新特性是 null 合并操作符（??）。此操作符可以用来处理变量为 null 或 undefined 的情况。

    18 天前

相关推荐

    暂无文章