vue.js - Vue 2/Typescript, πώς να κάνετε τύπο σε ένα prop inline;

Έχω ένα έργο Vue 2 NuxtJS ρυθμισμένο με Typescript και θα ήθελα να επωφεληθώ από τη λέξη-κλειδί unknown στο Typescript.

Στο συστατικό μου, λαμβάνω ένα prop που δηλώνεται ως εξής

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

LabelValuePair δηλώνεται εδώ

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

Και μέσα στο πρότυπό μου, θα ήθελα να χρησιμοποιήσω κάτι σαν αυτό

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

Το θέμα είναι ότι, όπως και ο τριμερής τελεστής, η λέξη-κλειδί as στο Typescript δεν αναγνωρίζεται ως έγκυρη σύνταξη από τον μεταγλωττιστή του Vue.

Υπάρχει κάποια λύση ή έστω κάποια παράκαμψη για να αποφύγουμε να κάνουμε κάτι ανόητο όπως το παρακάτω;

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

  return { castItems };
},

Απάντηση #1

Αν το LabelValuePair προορίζεται για επαναχρησιμοποίηση και αναμένεται να έχει τιμή string σε μια ιδιότητα, αυτή είναι η περίπτωση για γενικό τύπο:

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

και

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