如何将 Vue 3 与 TypeScript 一起使用

Vue 是一个令人惊叹的轻量级、渐进式前端框架。在本教程中，我们将演示如何完全使用 TypeScript 构建 Vue 应用程序。我们将通过使用基于类的组件、用于状态管理的 Vuex、生命周期钩子等构建示例应用程序，重点介绍将 TypeScript 与 Vue 结合使用的一些好处。让我们开始吧！

• Vue 和 TypeScript 入门

• 如何将 TypeScript 添加到 Vue 项目中

• 使用defineComponent

• 使用数据

• 使用道具

• 计算属性

• 方法

• 观察者

• emit

• 导入组件

• 使用 Vuex 和 TypeScript

• 生命周期钩子

• 在 Vue 中使用 TypeScript mixins

Vue 和 TypeScript 入门

Vue 是灵活的，因此用户不会被迫使用 TypeScript。与 Angular 不同，旧版本的 Vue 没有对 TypeScript 的适当支持。出于这个原因，大多数 Vue 应用程序在历史上都是用 JavaScript 编写的。

Vue 3于 2020 年 9 月发布，包括内置组合 API、多个根元素以及至关重要的改进的 TypeScript 支持等功能。有关如何将现有 Vue 项目迁移到 Vue 3 的详细信息，我建议查看将 Vue 2 应用程序重构为 Vue 3。

现在 Vue 正式支持 TypeScript，只需使用 Vue CLI，无需任何第三方库，就可以轻松地从头开始创建 TypeScript 项目。但是，官方 Vue 文档和 TypeScript 文档都没有包含您开始使用的所有信息。为了更全面地描绘，我们将演示如何使用Vue CLI构建一个新的 Vue 和 TypeScript 应用程序。

如何将 TypeScript 添加到 Vue 项目中

首先，我们将使用以下代码使用 TypeScript 设置一个新的 Vue 项目：

npx @vue/cli create typescript-app

选择手动选择功能并使用以下设置对其进行配置：

设置项目后，运行项目以对其进行测试：

cd typescript-app
npm run serve

打开localhost:8080项目或启动项目后控制台显示的任何 URL，您应该会看到您的应用程序成功运行。对于下面的每一项，我将同时展示 TypeScript 和 JavaScript 等效代码，以便您轻松比较两者。让我们开始吧！

使用defineComponent

defineComponent提供来自 Vue 库的装饰器，我们可以使用它来定义具有完整 TypeScript 支持的 Vue 组件。要使用，请从文件夹defineComponent中打开并添加以下代码：App.vue``src

//src/App.vue
//Typescript code

要使用 TypeScript，我们首先需要将标签中的lang属性设置为：

要使用计数器组件，Counter.vue请在components文件夹中创建并添加以下代码：

使用 Vuex 和 TypeScript

Vuex 是大多数 Vue 应用程序中使用的官方状态管理库。在Vuex 中，将 store 拆分为 modules 是一种很好的做法，因此我们将演示如何在 TypeScript 中编写它。为了存储状态，让我们在文件夹中创建一个名为types.ts的store文件：

// store/types.ts
export interface RootState{
    stateTitle:string;
}

在该store文件夹中，我们需要创建一个index.ts文件来初始化 Vuex 并注册模块：

// store/index.ts
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types';

const store:StoreOptions = {
  state:{
    stateTitle:"Vue.js and TypeScript: A Complete Tutorial With Examples",
  },
  modules:{

  }
}
export default new Vuex.Store(store)

在上面的代码中，我们利用StoreOptionsVuex 库来处理State、Getter、Mutation和Action. 我们可以访问和更新文件中stateTitle使用Getter和Setter的 值，App.vue如下所示：

// src/App.vue

​

生命周期钩子

一个Vue 组件有 8 个生命周期钩子，包括created和mounted。我们为每个钩子使用相同的 TypeScript 语法，并将它们声明为普通的类方法。由于生命周期钩子是自动调用的，它们既不接受参数也不返回任何数据。因此，我们不需要访问修饰符、键入参数或返回类型：

export default defineComponent({
  mounted() {
    //do something
  },
  beforeUpdate() {
    // do something
  }
})

JavaScript 等效代码如下所示：

export default {
  mounted() {
    //do something
  },
  beforeUpdate() {
    // do something
  }
}

在 Vue 中使用 TypeScript mixins

要在 TypeScript中创建 mixin，我们必须首先创建我们的 mixin 文件，其中包含我们与其他组件共享的数据。

在 mixins 目录中，创建一个名为ProjectMixin.ts并添加以下 mixin 的文件，它共享项目名称和更新项目名称的方法：

// src/mixins/ProjectMixin.ts
import { defineComponent } from 'vue';
​
export default defineComponent({
  data(){
    return{
        projName:"Vue.js and TypeScript: A complete tutorial with examples",
    }
  },
   projName:'My project',
   projectDetail1: {
    set value(v : string) {
    this.projName = v;
   },
​
    get value() : string {
    return  this.projName
   }
}
​
})

在 JavaScript 中，我们将上面的代码编写如下：

export default {
  data() {
    return {
      projName: 'My project'
    }
  },
  methods: {
    setProjectName(newVal) {
      this.projName = newVal
    }
  }
}

要在我们的 Vue 组件中使用上面的 TypeScript mixin，我们需要导入Mixinsfrom Vue 属性装饰器以及我们的 mixin 文件本身，然后编写如下：

// src/App.vue

​
//Typescript code

等效于 JavaScript 的代码如下：

结论

在本文中，我们介绍了完全在 TypeScript 中创建具有自定义装饰器功能且没有第三方库的 Vue 应用程序所需的所有基本信息。极光影院App，蓝光热播影视无限制观看，极速秒播内置超多片源！现在，您应该能够在 TypeScript 中启动并运行您的 Vue 应用程序，并使用诸如 defineComponent数据、道具、计算属性、方法和观察者等功能。

Vue 3.0 包括对 TypeScript 开箱即用的更好支持，并且整个 Vue 代码都用 TypeScript 重写以提高可维护性。我希望您喜欢本教程，如果您有任何问题，请务必发表评论。快乐编码！