Typing component props in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component with typed props?

Consider this Vue 3 component using <script setup> and typed props. What will it render when used as <Greeting name="Alice" age=30 />?

Vue

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps<{ name: string; age: number }>()
</script>
<template>
  <p>Hello, {{ props.name }}! You are {{ props.age }} years old.</p>
</template>

A <p>Hello, Alice! You are 30 years old.</p>

B <p>Hello, {{ name }}! You are {{ age }} years old.</p>

C <p>Hello, Alice! You are {{ age }} years old.</p>

D <p>Hello, ! You are 30 years old.</p>

💡 Hint

Remember that defineProps creates a typed props object you can use directly in the template.

The component uses defineProps with a typed object. The template accesses props.name and props.age, so the values passed in render correctly.

📝 Syntax

intermediate

Which option correctly types a prop with a default value in Vue 3?

Given a prop count that should be a number with a default of 10, which option correctly types and sets the default in a Vue 3 <script setup lang="ts"> component?

A

const props = defineProps<{ count: number }>()
const count = props.count ?? 10

B

const props = defineProps<{ count?: number }>()
const count = props.count ?? 10

C const props = defineProps({ count: { type: Number, default: 10 } })

D

const props = defineProps<{ count: number }>()
const count = props.count || 10

💡 Hint

Optional props need ? in the type and a fallback value in code.

Option B correctly marks count as optional and uses nullish coalescing to provide a default value. Option B lacks TypeScript typing. Option B requires count to be always present. Option B uses || which can wrongly override valid zero values.

🔧 Debug

advanced

Why does this Vue component cause a TypeScript error?

Examine this Vue 3 component snippet. Why does TypeScript report an error on props.title.toUpperCase()?

Vue

<script setup lang="ts">
const props = defineProps<{ title?: string }>()

const upperTitle = props.title.toUpperCase()
</script>

A Because <code>props</code> is not defined in <code>&lt;script setup&gt;</code>.

B Because <code>defineProps</code> does not support optional props.

C Because <code>title</code> is optional and might be undefined, so calling <code>toUpperCase()</code> is unsafe.

D Because <code>toUpperCase()</code> is not a valid string method in TypeScript.

💡 Hint

Think about what happens if title is missing.

Since title is optional, it can be undefined. Calling toUpperCase() on undefined causes an error. You must check or provide a default before calling string methods.

❓ state_output

advanced

What is the value of count after this Vue component runs?

Given this Vue 3 component using typed props and a reactive state, what is the final value of count after mounting?

Vue

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{ initialCount: number }>()
const count = ref(props.initialCount)

watch(() => props.initialCount, (newVal) => {
  count.value = newVal * 2
}, { immediate: true })
</script>

<!-- Used as: <Counter initialCount=5 /> -->

A 5

B undefined

C 0

D 10

💡 Hint

Consider how the watcher updates count when initialCount changes.

The count ref starts at 5 from props. The watcher triggers immediately on mount because initialCount is 5, updating count to 10 (5 * 2).

🧠 Conceptual

expert

Which statement about typing Vue component props with TypeScript is TRUE?

Choose the correct statement about typing props in Vue 3 with TypeScript and <script setup>.

A Props typed with <code>defineProps&lt;T&gt;()</code> are only checked at compile time; runtime validation requires additional options.

B Using <code>defineProps&lt;T&gt;()</code> enforces prop types at runtime automatically without extra code.

C You cannot use optional props with <code>defineProps&lt;T&gt;()</code> in Vue 3.

D Vue 3 automatically converts all prop types to strings when using TypeScript.

💡 Hint

Think about the difference between TypeScript checks and Vue runtime behavior.

TypeScript typing with defineProps<T>() only checks types during development (compile time). Vue does not enforce these types at runtime unless you define prop options with type and validator.