在Vue3中,给定组件ChildComponent.vue
:
<script setup lang="ts">
const props = defineProps<{
text: string;
}>();
</script>
另一个分量ParentComponent.vue
<template>
<ChildComponent :text="myText" />
</template>
<script script setup lang="ts">
import ChildComponent from './ChildComponent'
const myText = ref("hello")
</script>
我想创建一个TS类型,它“动态地”绑定到属性text
。有点像ReturnType<>
如何为函数工作,但我想它为属性。
所以我的代码就像这个虚构的代码一样工作。
<script script setup lang="ts">
import ChildComponent from './ChildComponent'
type TextProp = TypeOfProp<ChildComponent.props.text> // TypeOfProp<ChildComponent.props.text> = string
const myText = ref<TextProp>("hello")
</script>
我为什么要这样做?:我想在myText
ref上自动完成。
1条答案
按热度按时间9avjhtql1#
您可以使用
Ref
类型来实现所需的行为类型。Ref类型是一种泛型类型,它采用一个类型参数来表示它应保存的值的类型。下面介绍如何使用它来实现所需的行为:在这段代码中,我们使用
Ref
类型创建一个ref,该ref保存的值与ChildComponent
的文本属性的类型相同,这允许我们为myText
ref获得类型安全和自动完成。顺便说一句,Vue 3中的setup函数使用TypeScript的
defineComponent
函数来定义组件,因此您可以使用TypeScript的类型推断来自动推断 prop 的类型:在这段代码中,我们使用TypeScript的反结构化和类型推断功能来推断文本 prop 的类型,然后使用它来创建一个具有正确类型的
Ref
。这使您不必使用您在问题中提到的TypeOfProp
类型。根据注解编辑:
您可以在ParentComponent中定义TextProp类型,如下所示:
在本例中,我们使用TypeScript的
typeof
运算符从ChildComponent
中获取文本属性的类型,然后使用该类型创建具有正确类型的Ref。这允许我们在ParentComponent
中定义类型,同时仍然获得类型安全和自动完成的好处。