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.