Vue 3 + TypeScript的基本使用

步骤1：创建Vue 3 + TypeScript项目

首先，我们需要按照以下步骤创建一个Vue 3 + TypeScript项目：

使用Vue CLI创建一个新的项目：

vue create my-project

cd my-project

步骤2：编写Vue 3组件

接下来，我们将编写一个简单的Vue 3组件，演示如何使用TypeScript添加类型注解。在src目录下创建一个名为HelloWorld.vue的文件，编写以下代码：

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  name: 'HelloWorld',
  data() {
    return {
      greeting: 'Hello',
      message: 'Welcome to my app',
    };
  },
});
</script>

在上面的代码中，我们使用<script lang="ts">标签指定了脚本语言为TypeScript。defineComponent函数用于定义组件，并提供了类型检查的好处。注意，我们使用name属性来给组件命名，这样在其他地方使用时会更方便。

步骤3：使用组件和类型注解

在我们的应用中使用刚刚编写的组件，同时添加一些类型注解。在App.vue中编写以下代码：

<template>
  <div id="app">
    <HelloWorld :greeting="greeting" :message="message" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
  data() {
    return {
      greeting: 'Bonjour',
      message: 'Bienvenue dans mon application',
    };
  },
});
</script>

在上面的代码中，我们首先通过import语句引入了刚刚编写的HelloWorld组件。然后，我们在components选项中注册了该组件，这样就可以在<template>中使用它了。

同时，我们在data中添加了greeting和message的初始值，并使用:greeting和:message将它们作为属性传递给HelloWorld组件。这样做不仅可以为属性添加类型注解，还可以在编译阶段进行类型检查，防止属性类型不匹配的错误。

步骤4：进行类型检查和代码提示

现在，我们已经完成了一个简单的Vue 3 + TypeScript项目。运行以下命令启动开发服务器，查看应用效果：

npm run serve

在浏览器中打开http://localhost:8080，你应该能够看到页面上显示的欢迎语已经变成了法语，并且没有任何错误提示。

此外，当你在编辑器中编写代码时，你会发现TypeScript会提供准确的代码提示和类型检查，以及错误提示，这使得开发过程更加流畅和高效。