vue常见函数配合TS时的类型注解

在Vue 3 + TypeScript中，可以为下列函数添加类型注解

1. ref：ref函数用于创建一个响应式的引用对象。可以使用泛型注解来指定引用对象的类型。

import { ref } from 'vue';

const count = ref<number>(0);

2. reactive：reactive函数用于创建一个响应式的对象。可以使用泛型注解来指定对象的类型。

typescriptCopy code
import { reactive } from 'vue';

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

const user = reactive<User>({
  name: 'John',
  age: 25,
});

3. computed：computed函数用于创建一个计算属性。可以使用泛型注解来指定计算属性的类型。

typescriptCopy code
import { computed, ref } from 'vue';

const count = ref<number>(0);
const doubledCount = computed<number>(() => count.value * 2);

4. defineProps：defineProps函数用于定义组件的属性。在组件的props选项中使用defineProps函数，不需要显式注解，TypeScript会根据组件的props选项自动推导属性的类型。

typescriptCopy code
import { defineProps } from 'vue';

export default {
  props: {
    message: String,
    count: Number,
    isActive: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    // 可以直接使用props中定义的属性，并自动获得类型推断
    console.log(props.message);
    console.log(props.count);
    console.log(props.isActive);
  },
};

5. defineEmits：defineEmits函数用于定义组件的自定义事件。在组件的emits选项中使用defineEmits函数，不需要显式注解，TypeScript会根据组件的emits选项自动推导事件的类型。

import { defineEmits } from 'vue';

export default {
  emits: {
    click: (event: MouseEvent) => true,
    customEvent: (arg1: string, arg2: number) => {
      // 根据返回值类型推断事件参数类型
      return true;
    },
  },
  setup(_, { emit }) {
    const handleClick = (event: MouseEvent) => {
      emit('click', event);
    };

    const emitCustomEvent = () => {
      emit('customEvent', 'argument', 123);
    };

    return {
      handleClick,
      emitCustomEvent,
    };
  },
};

在上述示例中，通过添加适当的类型注解，可以增强在Vue 3 + TypeScript中使用这些函数的类型安全性。