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

作者站长头像
站长
· 阅读数 9

场镜

我封装了一个下拉框,现在下拉选项的类型原打算是只有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两个字段

回复
1个回答
avatar
test
2024-07-05

那就不指定键值了

type OptionsProp = Record<string, any>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容