当前位置: 首页 > 知识库问答 >
问题:

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

潘阳舒
2023-04-27

场镜

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

共有2个答案

强烨
2023-04-27

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

阎令
2023-04-27

那就不指定键值了

type OptionsProp = Record<string, any>
 类似资料: