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.

Practice

1. Why is using TypeScript beneficial when developing Vue applications?

easy

A. It automatically writes all the code for you.

B. It makes the app run faster in the browser.

C. It removes the need for Vue components.

D. It helps catch errors before running the app.

Solution

1. Step 1: Understand TypeScript's role in development

   TypeScript checks your code for mistakes before you run it, helping avoid bugs early.

2. Step 2: Compare benefits with other options

   Options B, C, and D are incorrect because TypeScript does not speed up runtime, remove components, or auto-generate code.

3. Final Answer:

   It helps catch errors before running the app. -> Option D

4. Quick Check:

   TypeScript catches errors early [OK]

Hint: TypeScript finds mistakes before running code [OK]

Common Mistakes:

• Thinking TypeScript speeds up app runtime
• Believing TypeScript replaces Vue components
• Assuming TypeScript writes code automatically

2. Which of the following is the correct way to declare a typed prop in a Vue component using TypeScript?

easy

A. const props = defineProps<{ name: string }>()

B. props: { name: { type: String, required: true } }

C. props: { name: String }

D. props: { name: any }

Solution

1. Step 1: Identify TypeScript syntax for props in Vue 3

   Using const props = defineProps<{ name: string }>() is the correct TypeScript way to type props in Vue 3's Composition API.

2. Step 2: Check other options for correctness

   Options A and B use JavaScript style without TypeScript typing. props: { name: any } uses any, which loses type safety.

3. Final Answer:

   const props = defineProps<{ name: string }>() -> Option A

4. Quick Check:

   Typed props in Vue 3 use defineProps with TypeScript [OK]

Hint: Use defineProps with TypeScript type for props [OK]

Common Mistakes:

• Using JavaScript prop syntax without types
• Using 'any' type which disables type checking
• Confusing Vue 2 and Vue 3 prop declarations

3. Given this Vue component code using TypeScript:

const count = ref(0);
function increment() {
  count.value += 1;
}
increment();
console.log(count.value);

What will be logged to the console?

medium

A. 1

B. 0

C. undefined

D. Error: count is not defined

Solution

1. Step 1: Understand ref and value in Vue with TypeScript

   ref(0) creates a reactive number starting at 0. Access with count.value.

2. Step 2: Trace the increment function and console log

   Calling increment() adds 1 to count.value, so it becomes 1. Then logging count.value outputs 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Increment ref value once [OK]

Hint: Remember to access ref values with .value [OK]

Common Mistakes:

• Logging ref variable without .value
• Assuming ref is a plain number
• Forgetting to call increment before logging

4. What is the main issue with this Vue + TypeScript code snippet?

const message = ref('Hello');
message = 'Hi';

medium

A. The ref function is missing an import statement.

B. You cannot assign a string directly to a ref variable.

C. The string 'Hi' should be wrapped in ref().

D. The variable message should be declared with let instead of const.

Solution

1. Step 1: Understand ref assignment rules in Vue with TypeScript

   A ref variable holds an object with a .value property. You cannot assign a string directly to the ref variable itself.

2. Step 2: Identify correct way to update ref value

   To change the string inside the ref, assign to message.value = 'Hi', not message = 'Hi'.

3. Final Answer:

   You cannot assign a string directly to a ref variable. -> Option B

4. Quick Check:

   Ref variables require .value for assignment [OK]

Hint: Assign to .value, not the ref variable itself [OK]

Common Mistakes:

• Assigning directly to ref variable instead of .value
• Confusing ref with normal variables
• Ignoring TypeScript error messages

5. You want to create a Vue component with a prop that accepts either a string or number, and you want TypeScript to enforce this. Which is the best way to declare this prop using Vue 3 and TypeScript?

hard

A. props: defineProps<{ value: any }>()

B. props: { value: [String, Number] }

C. const props = defineProps<{ value: string | number }>()

D. props: { value: { type: [String, Number], required: true } }

Solution

1. Step 1: Use TypeScript union types in defineProps

   Using const props = defineProps<{ value: string | number }>() tells TypeScript the prop can be string or number, enforcing type safety.

2. Step 2: Compare with other options

   Options B and C use JavaScript style without TypeScript type checking. props: defineProps<{ value: any }>() uses any, which disables type safety.

3. Final Answer:

   const props = defineProps<{ value: string | number }>() -> Option C

4. Quick Check:

   Use TypeScript union types with defineProps [OK]

Hint: Use TypeScript union types in defineProps for multiple types [OK]

Common Mistakes:

• Using JavaScript prop arrays without TypeScript types
• Using any type which disables checks
• Not using defineProps in Vue 3 Composition API