Typing component props in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a prop named title of type String.

Vue

<script setup lang="ts">
defineProps<{ title: [1] }>()
</script>

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

DArray

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'String' constructor instead of 'string' primitive.

Confusing prop type with default value.

The title prop is typed as string to accept string values.

2fill in blank

medium

Complete the code to type a prop named count as a Number.

Vue

<script setup lang="ts">
const props = defineProps<{ count: [1] }>()
</script>

Drag options to blanks, or click blank then click option'

Aboolean

Bstring

CObject

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Number' constructor instead of 'number'.

Typing the prop as string by mistake.

The count prop is typed as number to accept numeric values.

3fill in blank

hard

Fix the error in typing the isActive prop as a boolean.

Vue

<script setup lang="ts">
const props = defineProps<{ isActive: [1] }>()
</script>

Drag options to blanks, or click blank then click option'

Aboolean

BBoolean

Cbool

DBool

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Boolean' constructor instead of 'boolean'.

Using invalid types like 'bool' or 'Bool'.

Use the primitive type boolean to correctly type boolean props. The constructor Boolean types as a wrapper object.

4fill in blank

hard

Fill both blanks to type props name as String and age as Number.

Vue

<script setup lang="ts">
const props = defineProps<{ name: [1], age: [2] }>()
</script>

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

DObject

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the types for name and age.

Using uppercase constructors instead of lowercase primitives.

The name prop is typed as string and age as number to accept text and numeric values respectively.

5fill in blank

hard

Fill all three blanks to type props title as String, visible as Boolean, and items as Array.

Vue

<script setup lang="ts">
const props = defineProps<{ title: [1], visible: [2], items: [3] }>()
</script>

Drag options to blanks, or click blank then click option'

Anumber

Bboolean

CArray

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase constructors instead of lowercase primitives for basic types.

Confusing Array with Object.

The title prop is typed as string, visible as boolean, and items as Array to accept text, true/false, and list values respectively.