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

在Vue 3中，ref、reactive、computed、defineProps和defineEmits是常用的Composition API函数。它们的类型注解如下所示：

• ref：ref 函数用于创建一个响应式的数据对象，它接受一个初始值，并返回一个具有value属性的Ref对象

function ref<T>(value: T): Ref<T>

示例用法：

import { ref, Ref } from 'vue'

const count: Ref<number> = ref(0)

• reactive：reactive 函数用于创建一个具有响应式数据的普通对象，它接受一个普通的JavaScript对象，并返回一个响应式的代理对象。

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

示例用法：

import { reactive, UnwrapNestedRefs } from 'vue'

const state: UnwrapNestedRefs<{ count: number }> = reactive({
  count: 0
})

• computed：computed 函数用于创建一个计算属性，它可以基于响应式数据进行计算，并且具有缓存机制。

function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>

示例用法：

import { computed, ComputedRef, WritableComputedRef, WritableComputedOptions, ComputedGetter } from 'vue'

const double: ComputedRef<number> = computed(() => state.count * 2)

const total: WritableComputedRef<number> = computed({
  get: () => state.count,
  set: (value: number) => {
    state.count = value
  }
})

• defineProps：defineProps 函数用于定义组件的props，并返回一个代理对象。它的类型注解取决于组件的Props类型。

function defineProps<PropNames extends string[]>(props: PropNames): { [K in PropNames[number]]: any }

示例用法：

import { defineProps } from 'vue'

interface Props {
  message: string
  count: number
}

const props = defineProps<Props>()

console.log(props.message) // 类型推断为 string
console.log(props.count) // 类型推断为 number

• defineEmits：defineEmits 函数用于定义组件的emits，并返回事件触发函数的代理对象。它的类型注解取决于组件的EmitsOptions类型。

function defineEmits<Options extends EmitsOptions>(options: Options): DefineEmits

示例用法：

import { defineEmits } from 'vue'

const emits = defineEmits({
  click: (message: string) => {
    return typeof message === 'string'
  },
  update: (value: number) => {
    return typeof value === 'number'
  }
})

emits.click('Hello') // 类型检查通过
emits.update('10') // 类型检查不通过，因为参数应该是 number 类型