Почему TS выдает ошибку при задании значения по умолчанию для массива в props?

Question

[oexlkinq]

участок кода с ошибкой:

type strnum = string | number;
type datalist = { [key: strnum]: strnum }[];

const props = withDefaults(defineProps<{
    datalist?: datalist,
    id?: strnum,
    idKey?: strnum,
    valueKey?: strnum,
    placeholder?: string,
}>(), {
    datalist: [] as datalist,
    idKey: 'id',
    valueKey: 'value',
    placeholder: '',
});

ошибка:
Type 'datalist' is not assignable to type '(props: { datalist?: datalist | undefined; id?: strnum | undefined; idKey?: strnum | undefined; valueKey?: strnum | undefined; placeholder?: string | undefined; }) => datalist'.
Type '{ [key: string]: strnum; [key: number]: strnum; }[]' provides no match for the signature '(props: { datalist?: datalist | undefined; id?: strnum | undefined; idKey?: strnum | undefined; valueKey?: strnum | undefined; placeholder?: string | undefined; }): datalist'.

15 datalist: [] as datalist,

p.s. если поставить @ts-ignore для этой строчки, то всё нормально собирается и работает

Answer 1

[modelair]

const props = withDefaults(defineProps<{
    datalist?: datalist,
    id?: strnum,
    idKey?: strnum,
    valueKey?: strnum,
    placeholder?: string,
}>(), {
    datalist: () => [] as datalist,
    idKey: 'id',
    valueKey: 'value',
    placeholder: '',
});

Comments

[oexlkinq]

попробовал. работает. спасибо, конечно, но я до сих пор не понимаю, почему возникала ошибка? да и почему я стал должен задавать начальное значение функцией?

[modelair]

oexlkinq, потому что объявление props в vue делается именно так. это касается функций и объектов.
пруф https://vuejs.org/guide/components/props.html#prop...

[oexlkinq]

сложновато было это найти:

// Object with a default value
propE: {
  type: Object,
  // Object or array defaults must be returned from
  // a factory function. The function receives the raw
  // props received by the component as the argument.
  default(rawProps) {
    return { message: 'hello' }
  }
},