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

最新推荐文章于 2025-04-03 16:45:00 发布

原创最新推荐文章于 2025-04-03 16:45:00 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在Vue3中，可以使用TypeScript对ref、reactive、computed以及定义组件属性和发射事件进行类型注解，以增强代码的类型安全。例如，为ref指定number类型的泛型，用接口定义reactive对象的结构，以及在defineProps和defineEmits中明确属性和事件类型。

在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并指定可触发事件列表
  // ...
};