Typing ref and reactive in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a typed ref for a number.

Vue

const count = ref<[1]>(0);

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

Anumber

Bobject

Cboolean

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number for a numeric ref.

Forgetting to add the type inside < >.

We use ref<number> to tell Vue this ref holds a number.

2fill in blank

medium

Complete the code to create a reactive object with a typed property.

Vue

const state = reactive({ name: [1]('') });

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

Areactive

Bcomputed

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a single property.

Using computed or watch incorrectly here.

Use ref inside reactive to create a reactive property.

3fill in blank

hard

Fix the error in typing a reactive object with a string property.

Vue

const user = reactive<{ name: [1] }>({ name: 'Alice' });

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

Astring

Bboolean

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Typing name as number or boolean incorrectly.

Using any without reason.

The property name is a string, so type it as string.

4fill in blank

hard

Fill both blanks to type a ref holding an array of numbers.

Vue

const numbers = ref<[1]<[2]>>([]);

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

AArray

Bnumber

Cstring

DSet

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number for array items.

Using Set instead of Array here.

Use Array<number> to type an array of numbers inside a ref.

5fill in blank

hard

Fill all three blanks to type a reactive object with a boolean and a string property.

Vue

const settings = reactive<{ [1]: [2], [3]: string }>({ darkMode: true, language: 'en' });

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

AdarkMode

Bboolean

Clanguage

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing property names or types incorrectly.

Using number instead of boolean for darkMode.

The object has a boolean property darkMode and a string property language.