Vue3基础ts用法详解

在 Vue3 中，使用 TypeScript 进行开发的方式与使用 JavaScript 相似。Vue3 提供了相应的类型定义文件，以便于开发者编写类型安全的代码。

以下是 Vue3 基础 TypeScript 的用法：

1. 创建一个 Vue3 项目，并且指定 TypeScript 模板：

   vue create my-project --preset=@vue/cli-preset-typescript
   

2. 在 src 目录下创建一个 components 目录，然后在该目录下创建一个组件文件 HelloWorld.vue：

   <template>
     <div>
       <h1>{{ greeting }}</h1>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue'
   
   export default defineComponent({
     name: 'HelloWorld',
     props: {
       message: {
         type: String,
         required: true
       }
     },
     data() {
       return {
         greeting: 'Hello'
       }
     }
   })
   </script>
   

3. 在组件中声明 TypeScript 类型：

   <script lang="ts">
   import { defineComponent } from 'vue'
   
   export default defineComponent({
     name: 'HelloWorld',
     props: {
       message: {
         type: String,
         required: true
       }
     },
     data(): {
       greeting: string
     } {
       return {
         greeting: 'Hello'
       }
     }
   })
   </script>
   

   在 data() 函数中，我们可以为 greeting 声明类型为 string。

4. 在 Vue3 中，我们还可以使用 ref 和 reactive 创建响应式数据：

   <script lang="ts">
   import { defineComponent, ref } from 'vue'
   
   interface Data {
     greeting: string,
     count: number
   }
   
   export default defineComponent({
     name: 'HelloWorld',
     props: {
       message: {
         type: String,
         required: true
       }
     },
     setup() {
       const data = ref<Data>({
         greeting: 'Hello',
         count: 0
       })
   
       const increaseCount = () => {
         data.value.count++
       }
   
       return {
         data,
         increaseCount
       }
     }
   })
   </script>
   

   在上述代码中，我们使用了 TypeScript 的接口来定义数据类型，并声明了 data 和 increaseCount。

Vue3 中的 TypeScript 使用与 JavaScript 相似，但是需要在声明数据和组件时加上类型注解，这样能够让开发者编写出更加可靠的代码。在 Vue3 中，使用 TypeScript 进行开发可以提高代码的可读性和可维护性。