vue3里面使用ts

在Vue 3中使用TypeScript（TS）可以提供更好的类型检查和代码提示，以增强代码的可靠性和可维护性。下面是一些使用Vue 3和TypeScript的基本步骤：

1. 安装Vue 3和TypeScript：首先，确保你已经安装了最新版本的Vue CLI（如果没有，请执行`npm install -g @vue/cli`进行安装），然后创建一个新的Vue项目，选择TypeScript作为项目配置的一部分。

   vue create my-project

2. 创建一个Vue组件：在`src`目录下创建一个新的`.vue`文件，例如`HelloWorld.vue`。在组件内部，可以使用TypeScript定义组件的props、data、methods等。

   <template>
     <div>
       <h1>{{ greeting }}</h1>
     </div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     name: 'HelloWorld',
     props: {
       name: {
         type: String,
         required: true,
       },
     },
     data() {
       return {
         greeting: `Hello, ${this.name}!`,
       };
     },
     methods: {
       sayHello() {
         console.log(`Hello, ${this.name}!`);
       },
     },
   });
   </script>

3. 使用Vue组件：在父组件中使用刚刚创建的Vue组件时，可以像使用普通的Vue组件一样引入它，并传递props。

   <template>
     <div>
       <HelloWorld name="John" />
     </div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   import HelloWorld from './HelloWorld.vue';
   
   export default defineComponent({
     name: 'App',
     components: {
       HelloWorld,
     },
   });
   </script>

这只是一个简单的开始，你可以在Vue 3和TypeScript的结合中使用更多高级的特性，如组合式API、TypeScript装饰器、TSX等。通过在Vue 3项目中使用TypeScript，你可以更好地利用TypeScript的类型系统和编辑器的代码补全功能，提高开发效率和代码质量。