Why TypeScript matters in Vue

Introduction

TypeScript helps catch mistakes early and makes your Vue code easier to understand and maintain.

When building a large Vue app with many components.

When working in a team to keep code consistent.

When you want better code suggestions and error checking in your editor.

When you want to avoid bugs caused by wrong data types.

When you want to write clearer and safer Vue components.

Syntax

Vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

function increment() {
  count.value++
}
</script>

Use lang="ts" in the script tag to enable TypeScript in Vue components.

TypeScript types like number help Vue know what kind of data you expect.

Examples

Declare a string variable with a type to avoid mistakes like assigning numbers by accident.

Vue

<script lang="ts" setup>
const message: string = 'Hello Vue with TypeScript!'
</script>

Use ref with a type to track reactive boolean state safely.

Vue

<script lang="ts" setup>
import { ref } from 'vue'
const isVisible = ref<boolean>(true)
</script>

Define an interface to describe complex data shapes and use it with ref.

Vue

<script lang="ts" setup>
import { ref } from 'vue'
interface User {
  name: string
  age: number
}

const user = ref<User>({ name: 'Alice', age: 30 })
</script>

Sample Program

This Vue component uses TypeScript to keep track of a number count. The count starts at zero and increases when you click the button. TypeScript ensures count is always a number.

Vue

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

Important Notes

TypeScript works well with Vue's Composition API and <script setup> syntax.

Using TypeScript can slow down initial setup but helps prevent bugs later.

Editors like VS Code give better help when TypeScript is used.

Summary

TypeScript helps catch errors before running your Vue app.

It makes your code easier to read and maintain.

TypeScript works smoothly with Vue's modern features.

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