ref reactive computed define props define emits 的类型注解

在Vue 3中，你可以使用TypeScript来为ref、reactive、computed、defineProps和defineEmits等函数提供类型注解。下面是每个函数的类型注解示例：

ref

import { ref } from 'vue';
const count = ref<number>(0); // 注解为ref类型并指定泛型为number,<>位置在ref后边

reactive

import { reactive } from 'vue';
interface Person { name: string; age: number;}
const person = reactive<Person>({ name: 'John', age: 25,}); // 注解为reactive类型并指定泛型为Person接口类型

computed

import { ref, computed } from 'vue';
const count = ref<number>(0);
const double = computed<number>(() => count.value * 2); // 注解为computed类型并指定泛型为number
console.log(double.value);

defineProps 

import { defineProps } from 'vue';
interface Props {  message: string;  count: number;  }
export default {  props: defineProps<Props>(), // 注解为defineProps并指定泛型为Props接口类型
  // ...
};

defineEmits 

import { defineEmits } from 'vue';
export default {
  emits: defineEmits(['increment', 'decrement']), // 注解为defineEmits并指定可触发事件列表
  // ...
};