Vue3项目中引用TS语法的实例讲解

引入 TypeScript 是 Vue3 项目中的一种常见选择，它有助于提高代码质量和开发效率。下面将提供一个完整的指南，帮助你在 Vue3 项目中引入 TypeScript。

第一步：安装依赖

在 Vue3 项目中使用 TypeScript，首先需要安装一些必要的依赖。在项目根目录下，运行以下命令：

npm install --save-dev typescript @vue/cli-plugin-typescript

其中，typescript 是 TypeScript 的核心依赖，@vue/cli-plugin-typescript 则负责将 TypeScript 集成到 Vue3 项目中。

第二步：创建 TypeScript 文件

在项目中创建一个 TypeScript 文件，比如 src/sum.ts，并在其中编写一个加法函数：

export function sum(a: number, b: number): number {
  return a + b;
}

这里使用了 TypeScript 的类型注解来定义函数参数和返回值的类型。这样做可以让编译器检查你的代码，并在开发过程中提供更好的代码补全和错误提示。

第三步：在组件中使用 TypeScript

在 Vue3 组件中使用 TypeScript 非常简单。以下是一个示例组件：

<template>
  <div>
    <p>{{ message }}</p>
    <p>1 + 2 = {{ sum(1, 2) }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { sum } from '@/sum';

export default defineComponent({
  data() {
    return {
      message: 'Hello, TypeScript!'
    };
  },
  methods: {
    sum
  }
});
</script>

在该组件中，我们使用了 defineComponent 函数来定义一个 Vue3 组件，并在 <script> 标签中使用了 TypeScript 语法。注意，我们在 import 语句中使用了 @/sum 路径，这是因为我们把 src 目录添加到了 webpack 的 resolve.alias 列表中。

第四步：在 Vue3 项目中使用 vue-property-decorator

vue-property-decorator 是一个非常有用的 TypeScript 装饰器库，让你可以使用装饰器语法来定义 Vue3 组件的属性和生命周期函数。

首先需要安装 vue-property-decorator：

npm install --save-dev vue-property-decorator

然后，在组件中可以这样使用该库：

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({ default: 'Hello, World!' }) message: string;

  greet() {
    console.log(`Hello, ${this.message}`);
  }
}
</script>

在以上示例中，我们使用了 @Prop 装饰器来定义一个属性，并使用了 @Component 装饰器来定义一个 Vue3 组件。