Typing component props in Vue - Step-by-Step Execution

Concept Flow - Typing component props

Define props with types

↓

Use props in component

↓

Vue checks prop types

↓

Render component with props

↓

If type mismatch -> Warning in console

↓

End

This flow shows how Vue reads typed props, checks their types, and warns if types don't match.

Execution Sample

Vue

import { defineProps } from 'vue'

const props = defineProps<{ title: string; count: number }>()

console.log(props.title, props.count)

Defines props with types and logs their values inside a Vue component.

Execution Table

Step	Action	Prop Name	Expected Type	Passed Value	Type Check Result	Console Output
1	Define props with types	title	string	undefined	N/A
2	Define props with types	count	number	undefined	N/A
3	Component receives props	title	string	"Hello"	Pass
4	Component receives props	count	number	5	Pass
5	Render component	-	-	-	-	Hello 5
6	Component receives props	title	string	123	Fail
7	Component receives props	count	number	"five"	Fail
8	Render component with wrong types	-	-	-	-	Warning in console: Invalid prop type
9	End	-	-	-	-

💡 Execution ends after rendering and type checks with possible warnings.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	After Step 7	Final
props.title	undefined	"Hello"	"Hello"	123	123	123
props.count	undefined	undefined	5	5	"five"	"five"

Key Moments - 2 Insights

Why does Vue warn about prop types even if the component still renders?

Vue renders the component but shows a console warning if prop types don't match, as seen in steps 6-8 of the execution_table.

What happens if a prop is missing but typed?

If a prop is missing, Vue treats it as undefined but expects the typed type; this can cause warnings if the type is required, shown in steps 1-2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the type check result for prop 'count' at step 4?

A N/A

B Fail

C Pass

D Unknown

💡 Hint

Check the 'Type Check Result' column at step 4 in the execution_table.

At which step does Vue warn about invalid prop types?

A Step 5

B Step 8

C Step 3

D Step 1

💡 Hint

Look for 'Warning in console' in the 'Console Output' column.

If the prop 'title' is changed to a number, how does the variable_tracker show it after step 6?

A 123

B "Hello"

C undefined

D null

💡 Hint

Check 'props.title' value after step 6 in variable_tracker.

Concept Snapshot

Typing component props in Vue:
- Use defineProps<Type>() to declare prop types.
- Vue checks passed props against these types.
- If types mismatch, Vue warns in console but still renders.
- Helps catch bugs early by validating prop data.
- Missing props are undefined unless defaulted.

Full Transcript

This visual execution shows how Vue handles typing component props. First, props are defined with types using defineProps. When the component receives props, Vue checks if the passed values match the expected types. If they do, the component renders normally and logs the prop values. If types don't match, Vue still renders but shows a warning in the console. The variable tracker shows how prop values change step by step, including when wrong types are passed. This helps beginners see how Vue validates props and why typing props is useful to catch errors early.

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?