Why TypeScript matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a reactive variable with TypeScript in Vue.

Vue

const count = ref[1](0);

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

A[number]

B(number)

C<number>

D{number}

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of angle brackets for type.

Using square brackets or curly braces which are not valid here.

In Vue with TypeScript, you specify the type inside angle brackets when using ref to make the variable reactive and typed.

2fill in blank

medium

Complete the code to define a prop with a specific type in a Vue component using TypeScript.

Vue

defineProps<{ title: [1] }>();

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

Astring

BString

Cstr

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using String (capitalized) which is a JavaScript constructor, not a TypeScript type.

Using made-up types like str or text.

In TypeScript, the type for text is string (all lowercase). This tells Vue the prop title must be a string.

3fill in blank

hard

Fix the error in the Vue component's setup function by completing the return type annotation.

Vue

setup(): [1] { return { count }; }

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

Avoid

BRecord<string, any>

Cnumber

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using void which means no return value.

Using number which is a primitive, not an object.

Using object which is less specific and can cause issues.

The setup function returns an object with reactive properties. Using Record<string, any> correctly types this return value.

4fill in blank

hard

Fill both blanks to define a reactive object with typed properties in Vue using TypeScript.

Vue

const user = reactive<{ name: [1]; age: [2] }>({ name: '', age: 0 });

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up types like using boolean for text or numbers.

Using any which loses type safety.

The name property is text, so it uses string. The age property is a number, so it uses number.

5fill in blank

hard

Fill all three blanks to create a computed property with a typed getter in Vue using TypeScript.

Vue

const doubleCount = computed<[1]>(() => count.value [2] 2 [3] 0);

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

Anumber

B*

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types like string for numeric results.

Using wrong operators that cause syntax errors.

The computed property returns a number. The expression multiplies count.value by 2 and then adds something (like 0) to complete the expression.