vue.js - Vue 2/Typescript, cum să transformi un prop inline?

Am un proiect Vue 2 NuxtJS configurat cu Typescript și aș dori să profit de cuvântul cheie unknown în Typescript.

În componenta mea, primesc o proprietate declarată astfel

props: { 
  items: {
    type: Array as () => LabelValuePair[],
    required: true,
  },
},

LabelValuePair este declarat aici

interface LabelValuePair {
  label: string;
  value: unknown;
}

Și în interiorul șablonului meu, aș dori să folosesc ceva de genul acesta

<li v-for="item in items" :key="item.value as string">
  <span>
    {{ item.label }}: <strong>{{ item.value }}</strong>
  </span>
</li>

Problema este că, la fel ca operatorul ternar, cuvântul cheie as din Typescript nu este recunoscut ca sintaxă validă de către compilatorul Vue.

Există o soluție sau măcar o cale de ocoli pentru a evita să faci ceva prostesc, ca în exemplul următor?

setup(props) {
  const castItems = props.items.map((item) => ({
    ...item,
    value: item.value as string,
  }));

  return { castItems };
},

Răspuns #1

Dacă LabelValuePair urmează să fie reutilizat și se așteaptă să aibă o valoare string într-o proprietate, acesta este cazul pentru tipul generic:

interface LabelValuePair<T = unknown> {
  label: string;
  value: T;
}

și

  items: {
    type: Array as PropType<LabelValuePair<string>[]>,
    required: true,
  },