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.

Practice

1. What is the main benefit of typing component props in Vue with TypeScript?

easy

A. It disables prop validation.

B. It automatically styles the component.

C. It makes the component load faster.

D. It helps catch errors early and improves code clarity.

Solution

1. Step 1: Understand the purpose of typing props

   Typing props allows the developer to specify what kind of data the component expects, which helps catch mistakes before running the code.

2. Step 2: Recognize the benefits of typing

   Typed props improve code clarity and reduce bugs by making expectations explicit.

3. Final Answer:

   It helps catch errors early and improves code clarity. -> Option D

4. Quick Check:

   Typing props = catch errors early [OK]

Hint: Typing props means fewer bugs and clearer code [OK]

Common Mistakes:

• Thinking typing changes component speed
• Confusing typing with styling
• Believing typing disables validation

2. Which is the correct syntax to type props in a Vue 3 <script setup lang="ts"> block?

easy

A. const props = defineProps('title: string')

B. const props = defineProps(["title: string"])

C. const props = defineProps<{ title: string }>()

D. const props = defineProps(title: string)

Solution

1. Step 1: Recall the correct typing syntax

   In Vue 3 with TypeScript, props are typed using defineProps<Type>() where Type is an object type.

2. Step 2: Identify the correct syntax

   const props = defineProps<{ title: string }>() uses the correct generic syntax with an object type describing the prop.

3. Final Answer:

   const props = defineProps<{ title: string }>() -> Option C

4. Quick Check:

   defineProps<Type>() syntax = const props = defineProps<{ title: string }>() [OK]

Hint: Use defineProps with angle brackets and object type [OK]

Common Mistakes:

• Passing a string instead of a type
• Using parentheses instead of angle brackets
• Not wrapping props in an object type

3. Given this Vue component code inside <script setup lang="ts">:

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

console.log(props.count ?? 0)

What will be logged if the component is used without passing count?

medium

A. 0

B. NaN

C. undefined

D. Error at runtime

Solution

1. Step 1: Understand the optional prop typing

   The prop count is optional (marked with ?), so it may be undefined if not passed.

2. Step 2: Evaluate the expression props.count ?? 0

   The nullish coalescing operator ?? returns the right side (0) if props.count is null or undefined.

3. Final Answer:

   0 -> Option A

4. Quick Check:

   Optional prop missing uses default 0 [OK]

Hint: Optional props may be undefined; use ?? for defaults [OK]

Common Mistakes:

• Expecting undefined instead of default
• Confusing ?? with || operator
• Assuming runtime error for missing optional prop

4. Identify the error in this Vue 3 TypeScript prop typing:

<script setup lang="ts">
const props = defineProps<{ name: string | undefined }>()
</script>

What is the problem?

medium

A. Props should not use union with undefined; use optional instead.

B. Missing default value for name prop.

C. defineProps must be called without type arguments.

D. The prop name must be a number, not string.

Solution

1. Step 1: Understand how to mark optional props

   In Vue with TypeScript, optional props should be marked with ? instead of union with undefined.

2. Step 2: Identify the incorrect typing

   Using string | undefined is allowed but not recommended; better to write name?: string for optional props.

3. Final Answer:

   Props should not use union with undefined; use optional instead. -> Option A

4. Quick Check:

   Use ? for optional props, not union with undefined [OK]

Hint: Use ? to mark optional props, not union with undefined [OK]

Common Mistakes:

• Using union with undefined instead of ?
• Forgetting to mark optional props
• Confusing default values with typing

5. You want to type a Vue component prop named items that accepts an array of objects with a required id (number) and optional label (string). Which is the correct TypeScript type for defineProps?

hard

A. defineProps<{ items?: Array<{ id: number; label: string }> }>()

B. defineProps<{ items: { id: number; label?: string }[] }>()

C. defineProps<{ items: { id: number; label: string | undefined } }>()

D. defineProps<{ items: Array<{ id: number; label: string }> }>()

Solution

1. Step 1: Understand the prop structure

   The prop items is an array of objects. Each object must have a required id (number) and an optional label (string).

2. Step 2: Choose the correct typing

   defineProps<{ items: { id: number; label?: string }[] }>() correctly types items as an array of objects with id: number and optional label?: string. The prop itself is required.

3. Final Answer:

   defineProps<{ items: { id: number; label?: string }[] }>() -> Option B

4. Quick Check:

   Array of objects with optional label = defineProps<{ items: { id: number; label?: string }[] }>() [OK]

Hint: Use ? inside object for optional fields in array props [OK]

Common Mistakes:

• Marking label as required when optional
• Making items optional when it should be required
• Using label: string | undefined instead of label?