在 Vue Composition API 中获取属性类型

Question

导入组件时是否可以获取其属性类型？

例如：

import MyComponent from '.my-component.vue';

const props: ComponentProps<MyComponent> = {

};

知道如何创作

ComponentProps

吗？

Answer 1

我建议在脚本块内定义 prop 选项，并使用

ExtractPropTypes

实用程序获取其类型并公开此类型：

<script lang="ts">
import { ExtractPropTypes } from 'vue'

export const propsOptions = {
  foo: String,
  bar: Boolean,
  baz: {
    type: Number,
    required: true
  },
  qux: {
    type: Number,
    default: 1
  }
} as const


export type CompProps = ExtractPropTypes<typeof propsOptions>

</script>
<script setup lang="ts">
defineProps(propsOptions)
</script>

<template>
  <div>
    <slot />
  </div>
</template>

这使得组件 props 类型可重用并且只有一个来源，而无需每次在父组件中使用组件时都提取它们。它们还可以用作可组合项中的参数类型。