如何将 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
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
​
export default defineComponent({
  components:{
    HelloWorld
  }
})
</script>

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

<script lang="ts">

defineComponent有一个装饰器，允许我们定义组件和每个组件的属性。该components对象帮助我们将组件添加到模板中：

components: {
    HelloWorld,
  }

使用数据

要使用数据属性，我们可以简单地将它们声明为类变量：

export default defineComponent({
  components:{
    HelloWorld,
  },
  data(){
    return{
      title:"welcome to my app",
      list: [
    {
      name: 'popoolatopzy',
      age: '26'
    },
    {
      name: 'Preetish',
      age: '26'
    },
    {
      name: 'John',
      age: '30'
    }
  ]
    }
  }
})

JavaScript 等效代码如下所示：

export default {
  data() {
    return {
      title: "welcome to my a