获取Vue组件属性的TS类型

m1m5dgzv  于 2022-12-04  发布在  Vue.js
关注(0)|答案(1)|浏览(288)

在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上自动完成。

9avjhtql

9avjhtql1#

您可以使用Ref类型来实现所需的行为类型。Ref类型是一种泛型类型,它采用一个类型参数来表示它应保存的值的类型。下面介绍如何使用它来实现所需的行为:

import { defineProps, ref } from 'vue';

// Define the props for the ChildComponent
const props = defineProps<{
  text: string;
}>();

// Define the type of the prop you want to use
type TextProp = typeof props.text;

// Use the Ref type to create a ref that holds a string value
const myText = ref<TextProp>('hello');

在这段代码中,我们使用Ref类型创建一个ref,该ref保存的值与ChildComponent的文本属性的类型相同,这允许我们为myText ref获得类型安全和自动完成。
顺便说一句,Vue 3中的setup函数使用TypeScript的defineComponent函数来定义组件,因此您可以使用TypeScript的类型推断来自动推断 prop 的类型:

import { defineProps, ref } from 'vue';

// Define the props for the ChildComponent
const props = defineProps<{
  text: string;
}>();

// Infer the type of the prop you want to use
const { text: TextProp } = props;

// Use the Ref type to create a ref that holds a string value
const myText = ref<TextProp>('hello');

在这段代码中,我们使用TypeScript的反结构化和类型推断功能来推断文本 prop 的类型,然后使用它来创建一个具有正确类型的Ref。这使您不必使用您在问题中提到的TypeOfProp类型。

根据注解编辑:

您可以在ParentComponent中定义TextProp类型,如下所示:

import { defineProps, ref } from 'vue';
import ChildComponent from './ChildComponent';

// Define the type of the prop you want to use
type TextProp = typeof ChildComponent.props.text;

// Use the Ref type to create a ref that holds a string value
const myText = ref<TextProp>('hello');

在本例中,我们使用TypeScript的typeof运算符从ChildComponent中获取文本属性的类型,然后使用该类型创建具有正确类型的Ref。这允许我们在ParentComponent中定义类型,同时仍然获得类型安全和自动完成的好处。

相关问题