vue3+ts属性类型定义时如何可以传入任意类型的数组呢？

  • Z时代
  • 2024-03-02
  • 分类：IT

场镜

我封装了一个下拉框，现在下拉选项的类型原打算是只有label和value属性，但是现在组件的使用场景扩大了，label和value对应的字段可能不一样，这样options的类型就没法指定了，因为传入的类属性不定，这该如何声明类型呢？

代码

interface OptionsProp {
  label?: string | number
  value?: string
}
const props = defineProps({
  label: propTypes.string,
  value: propTypes.string,
  labelField: propTypes.string.def('label'),
  valueField: propTypes.string.def('value'),
  options: Array as PropType<OptionsProp[]>,
  disable: propTypes.bool.def(false),
})
// 使用
interface MyOption{
occupationCode:string
occupationName:string
}
const myOptions =ref<MyOption>([])
<MySelect
    label="职业"
    :value="info.occupationCode"
    label-field="occupationName"
    value-field="occupationCode"
    :options="myOptions"  // 这有警告信息
/>

myOptions的类型的属性名，也可能是其他，比如aaName,aaCode等等。

警告信息

不能将类型“{ occupationCode: string; occupationName: string; }[]”分配给类型“OptionsProp[]”。
类型“{ occupationCode: string; occupationName: string; }”与类型“OptionsProp”不具有相同的属性

疑问

我这个options该如何定义能接受属性名不定的场景呢？属性目前是只有label和value两个字段

回答：

那就不指定键值了

type OptionsProp = Record<string, any>

回答：

ts4.x我记得是支持动态key

以上是 vue3+ts属性类型定义时如何可以传入任意类型的数组呢？ 的全部内容， 来源链接： utcz.com/p/934121.html

回到顶部