How can you inline cast a prop in Vue 2 using Typescript?

Question

I'm currently working on a Vue 2 NuxtJS project with Typescript and I want to make use of the unknown keyword in Typescript.

Within my component, I am receiving a prop declared as follows:

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

The definition of LabelValuePair is provided below

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

In my template, I intend to use something like this:

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

The issue is that both the ternary operator and the as keyword from Typescript are not recognized as valid syntax by the vue compiler.

Is there a solution or workaround to avoid resorting to something like the following?

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

  return { castItems };
},

Answer 1

Answer №1

When LabelValuePair needs to be reused and is supposed to contain a string value in a prop, the following generic type should be used:

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

Additionally,

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

Answer 2

When LabelValuePair needs to be reused and is supposed to contain a string value in a prop, the following generic type should be used:

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

Additionally,

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