Vue3 中的工具类型总结
在一些情况下,当需要在 TypeScript 中处理响应式数据时,可能会遇到类型推断的问题,而使用 UnwrapRef 可以帮助解决这些问题。在上述示例中,我们使用 UnwrapRef 来取消 count 响应式数据的引用类型的嵌套。使用 UnwrapRef 类型工具可以将 Ref 对象还原为其原始的值类型,以便在需要直接操作原始值的地方使用。当我们使用 ref 函数创建一个响应式数据时,会得到一
·
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))
待续
更多推荐
已为社区贡献3条内容
所有评论(0)