ts+vue3 类型注解

偷光

已于 2023-07-11 18:12:14 修改

阅读量495

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript typescript 前端开发语言前端框架

于 2023-07-11 16:53:43 首次发布

本文链接：https://blog.youkuaiyun.com/wbskb/article/details/131664001

在实际开发中的应用：

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

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

ref：

import { ref } from 'vue';

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

reactive：

import { reactive } from 'vue';

interface User {
  name: string;
  age: number;
}

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

computed：

import { computed, Ref } from 'vue';

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

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,
  },
});

defineEmits：

import { defineEmits } from 'vue';

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

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

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