Typing computed properties in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property using Vue's Composition API.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value[1]2)
</script>

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

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

Using - or / will produce incorrect results.

The computed property doubleCount multiplies count by 2 using the * operator.

2fill in blank

medium

Complete the code to type a computed property that returns a string.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed<string>(() => firstName.value + ' ' + [1].value)
</script>

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

AfirstName

BfullName

ClastName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using firstName twice will duplicate the first name.

Using fullName inside its own definition causes errors.

The computed property fullName concatenates firstName and lastName. We use lastName here to complete the full name.

3fill in blank

hard

Fix the error in typing the computed property that returns a number.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const items = ref<number[]>([1, 2, 3])
const total = computed<number>(() => items.value.reduce((acc, cur) => acc + cur, [1]))
</script>

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

A''

Bundefined

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty string or null as initial value causes runtime errors.

Omitting the initial value can cause errors if the array is empty.

The reduce function needs a starting number 0 to sum the array correctly.

4fill in blank

hard

Fill both blanks to type a computed property that filters an array of strings by length.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const words = ref<string[]>(['apple', 'banana', 'cherry', 'date'])
const longWords = computed<string[]>(() => words.value.filter(word => word.length [1] [2]))
</script>

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

A>

B5

C<

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > will filter shorter words.

Using 3 instead of 5 changes the filter criteria.

The computed property filters words with length greater than 5.

5fill in blank

hard

Fill all three blanks to type a computed property that creates an object mapping words to their uppercase versions for words longer than 4 characters.

Vue

<script setup lang="ts">
import { ref, computed } from 'vue'
const words = ref<string[]>(['vue', 'react', 'angular', 'svelte'])
const upperMap = computed<Record<string, string>>(() => {
  return Object.fromEntries(words.value.filter(word => word.length [1] [2]).map(word => [[3], word.toUpperCase()]))
})
</script>

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

A>

B4

Cword

Dword.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using word.length as key will cause keys to be numbers, not words.

Using < instead of > changes the filter logic.

The computed property filters words longer than 4 characters and maps each word to its uppercase version using the word itself as the key.

Practice

1. What is the main benefit of typing computed properties in Vue?

easy

A. It disables reactivity for the computed property.

B. It helps catch errors early and improves code clarity.

C. It automatically updates the DOM without reactivity.

D. It makes the computed property run faster.

Solution

1. Step 1: Understand typing purpose

   Typing in computed properties helps the developer know what type of value to expect and prevents mistakes.

2. Step 2: Recognize benefits

   Typing improves code clarity and helps catch errors before running the code.

3. Final Answer:

   It helps catch errors early and improves code clarity. -> Option B

4. Quick Check:

   Typing computed properties = better error detection [OK]

Hint: Typing improves clarity and error detection [OK]

Common Mistakes:

• Thinking typing affects runtime speed
• Believing typing disables reactivity
• Confusing typing with DOM updates

2. Which of the following is the correct syntax to type a computed property returning a number in Vue 3 with TypeScript?

easy

A. const total = computed<number>(() => 42);

B. const total = computed((): string => 42);

C. const total = computed<string>(() => 42);

D. const total = computed(() => '42' as number);

Solution

1. Step 1: Identify correct typing syntax

   The correct way to type a computed property is using computed<Type>(() => value).

2. Step 2: Match return type and value

   The value 42 is a number, so computed<number>(() => 42) matches correctly.

3. Final Answer:

   const total = computed<number>(() => 42); -> Option A

4. Quick Check:

   Use computed<Type> for typing [OK]

Hint: Use computed<Type>(() => value) to type computed [OK]

Common Mistakes:

• Using wrong generic type like string for number value
• Typing the function return instead of computed generic
• Casting inside the function instead of typing computed

3. Given the code below, what is the type of fullName.value?

import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed<string>(() => `${firstName.value} ${lastName.value}`);

medium

A. string

B. Ref<string>

C. undefined

D. number

Solution

1. Step 1: Understand computed typing

   The computed property is typed as computed<string>, so its value is a string.

2. Step 2: Check .value type

   Accessing fullName.value gives the computed value, which is a string.

3. Final Answer:

   string -> Option A

4. Quick Check:

   Typed computed value = string [OK]

Hint: Access .value to get typed computed result [OK]

Common Mistakes:

• Confusing computed ref type with its value type
• Assuming fullName.value is a Ref<string>
• Thinking fullName.value is undefined before assignment

4. Identify the error in this Vue computed property typing:

const count = ref(0);
const doubleCount = computed<string>(() => count.value * 2);

medium

A. The computed function should not use an arrow function.

B. The ref should be typed as string, not number.

C. The computed type should be number, not string.

D. The computed property cannot depend on a ref.

Solution

1. Step 1: Check the computed return value type

   The expression count.value * 2 results in a number.

2. Step 2: Match computed generic type

   The computed is typed as string, which mismatches the number result.

3. Final Answer:

   The computed type should be number, not string. -> Option C

4. Quick Check:

   Computed type must match return value type [OK]

Hint: Match computed generic type to returned value type [OK]

Common Mistakes:

• Typing computed as string when returning number
• Thinking arrow functions are invalid in computed
• Believing computed can't depend on refs

5. You want to create a typed computed property that returns the count of items in a reactive array items. Which is the correct way to type it in Vue 3 with TypeScript?

const items = ref<string[]>([]);
const itemCount = computed<???>(() => items.value.length);

hard

A. Array<string>

B. string

C. Ref<number>

D. number

Solution

1. Step 1: Determine the return type of computed

   items.value.length returns a number representing the count.

2. Step 2: Use computed generic type matching return

   The computed should be typed as computed<number> to match the number return.

3. Final Answer:

   number -> Option D

4. Quick Check:

   Computed type = return value type [OK]

Hint: Type computed with the exact return value type [OK]

Common Mistakes:

• Typing computed as Ref<number> instead of number
• Using string type for a numeric length
• Confusing array type with count type