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 的泛型类型,可以用来在 provideinject 之间同步注入值的类型

举例:

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))

待续

Logo

前往低代码交流专区

更多推荐