Vue3 中的工具类型总结

1，UnwrapRef

是 Vue 3 中的一个类型工具，用于取消引用(ref)类型的嵌套。

1，作用

1，取消引用(ref)类型的嵌套。

当我们使用 ref 函数创建一个响应式数据时，会得到一个 Ref 对象，它是一个包装了原始值的对象。

使用 UnwrapRef 类型工具可以将 Ref 对象还原为其原始的值类型，以便在需要直接操作原始值的地方使用。

2，提供更好的类型推断。

可以帮助 TypeScript 更准确地推断和推导响应式数据的类型。在一些情况下，当需要在 TypeScript 中处理响应式数据时，可能会遇到类型推断的问题，而使用 UnwrapRef 可以帮助解决这些问题。

2，举例

1，取消 ref 响应。

import { ref, UnwrapRef } from 'vue';

const count = ref(0); // 创建一个响应式数据

type UnwrappedCount = UnwrapRef<typeof count>; // 使用 UnwrapRef 取消引用类型的嵌套

function increment(value: UnwrappedCount) {
  value++;
  console.log(value);
}

increment(count.value); // 输出: 1

在上述示例中，我们使用 UnwrapRef 来取消 count 响应式数据的引用类型的嵌套。这样，我们就可以在 increment 函数中直接操作原始的数值，而不需要使用 .value 访问 Ref 对象的值。

2，取消 computed 响应

import { ComputedRef, UnwrapRef } from 'vue';

type myContext = {
    auto: ComputedRef<string>;
    watch: (val: number, oldVal: number) => void;
}

type unContext = UnwrapRef<myContext>
/*
{
    auto: string;
    watch: (val: number, oldVal: number) => void;
}
*/

2，InjectionKey

Vue 提供的接口，它是一个继承自 Symbol 的泛型类型，可以用来在 provide 和 inject 之间同步注入值的类型：

举例：

import { provide, inject, computed, ref } from 'vue'
import type { InjectionKey, Ref } from 'vue'

// 表示注入值的类型是 ref<string>
const nsContextKey: InjectionKey<Ref<string | undefined>> = Symbol('nsContextKey')

const config = ref({ns: '可以是配置的 ns'})
const defaultNs = '下雪天的夏风'

provide(key, computed(() => config.value.ns))
inject(namespaceContextKey, ref(defaultNs))

待续