ts+vue3 类型注解

在实际开发中的应用：

ref 响应式，声明各种类型，依赖 reactive 执行
reactive 响应式，处理复杂类型
computed 计算属性
defineProps 接收数据父组件传来的数据，并进行校验
defineEmits 子组件将自己暴露出去，方便其他组件的的调用

在 TypeScript 中，我们可以使用类型注解为 Vue 3 中的 ref、reactive、computed、defineProps 和 defineEmits 进行类型注解。这些功能主要用于 Vue 3 的 Composition API。

1. ref：

   import { ref } from 'vue';
   
   const count = ref<number>(0); // 使用类型注解为 ref 创建一个数值类型的 ref
   

2. reactive：

   import { reactive } from 'vue';
   
   interface User {
     name: string;
     age: number;
   }
   
   const user = reactive<User>({ // 使用类型注解为 reactive 创建一个 User 类型的响应式对象
     name: 'John',
     age: 25,
   });
   

3. computed：

   import { computed, Ref } from 'vue';
   
   const double = computed<number>(() => count.value * 2); // 使用类型注解为 computed 创建一个返回数值类型的计算属性
   

4. defineProps：

   import { defineProps, PropType } from 'vue';
   
   interface Props {
     count: number;
     isEnabled: boolean;
   }
   
   const props = defineProps<Props>({
     count: {
       type: Number as PropType<number>, // 使用 PropType 进行类型注解
       required: true,
     },
     isEnabled: {
       type: Boolean as PropType<boolean>,
       default: false,
     },
   });
   

5. defineEmits：

   import { defineEmits } from 'vue';
   
   const emit = defineEmits(['increment']); // 使用类型注解为 `emit` 创建一个具有 'increment' 事件的 emit 对象
   

上述示例中，我们使用类型注解来明确指定 ref 的值类型、reactive 的对象类型、computed 的返回值类型、defineProps 的属性类型以及 defineEmits 的事件类型。

请注意，在 Vue 3 中使用 Composition API 时，并非必须进行类型注解，因为 TypeScript 在大多数情况下能够根据上下文自动推断类型。但类型注解可以提供更明确的类型信息，从而增强代码的可读性和可维护性，并且能够帮助编译器检测类型错误。