Consider this Vue 3 generic component using the Composition API:
<script setup lang="ts">
import { defineProps } from 'vue'
type Item = { id: number; name: string }
const props = defineProps<{ items: Item[] }>()
</script>
<template>
<ul>
<li v-for="item in props.items" :key="item.id">{{ item.name }}</li>
</ul>
</template>If you pass items=[{id:1, name:'Apple'}, {id:2, name:'Banana'}], what will be the output?
<script setup lang="ts"> import { defineProps } from 'vue' type Item = { id: number; name: string } const props = defineProps<{ items: Item[] }>() </script> <template> <ul> <li v-for="item in props.items" :key="item.id">{{ item.name }}</li> </ul> </template>
Look at what is displayed inside the <li> tags.
The component loops over props.items and displays the name property of each item. So it renders a list with 'Apple' and 'Banana'.
In Vue 3 with TypeScript, you want to define a generic component that accepts a prop data of type T[]. Which syntax is correct?
Remember that Array<T> and T[] are equivalent in TypeScript.
Option B correctly defines a prop named data as an array of generic type T. Option B is invalid because T is not declared in that scope. Option B tries to define props as T directly, which is incorrect. Option B defines data as a single T, not an array.
Given this Vue 3 component code snippet:
<script setup lang="ts">
import { defineProps } from 'vue'
type Item<T> = { id: number; value: T }
const props = defineProps<{ items: Item[] }>()
</script>Why does it fail?
<script setup lang="ts"> import { defineProps } from 'vue' type Item<T> = { id: number; value: T } const props = defineProps<{ items: Item[] }>() </script>
Check how generic types are used in TypeScript.
The type Item is generic and requires a type parameter T. Using Item[] without specifying T causes a TypeScript error. You must specify Item<SomeType>[].
Consider this Vue 3 generic component:
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Increment</button>
<p>Count: {{ count.value }}</p>
</template>What will be displayed after clicking the button twice?
<script setup lang="ts"> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">Increment</button> <p>Count: {{ count.value }}</p> </template>
Each click increases count by 1.
The increment function increases count.value by 1 each time the button is clicked. After two clicks, count is 2.
Choose the correct statement about using generic components in Vue 3 with TypeScript.
Think about TypeScript's role in Vue components.
Generic types in Vue with TypeScript provide compile-time type safety but do not change how the component behaves at runtime. Options B, C, and D are false because Composition API supports generics, templates do not specify generic parameters explicitly, and Vue does not infer generic types automatically without annotations.