Setting up TypeScript in Vue project - Try It Yourself

Setting up TypeScript in Vue project

📖 Scenario: You are starting a new Vue 3 project and want to use TypeScript to write safer and clearer code. This project will guide you step-by-step to set up TypeScript in your Vue project using the Composition API.

🎯 Goal: By the end, you will have a Vue 3 component written in TypeScript with a reactive variable and a method, ready to be used in your app.

📋 What You'll Learn

Create a Vue 3 component file with TypeScript support

Define a reactive variable using ref from Vue's Composition API

Add a TypeScript type annotation for the reactive variable

Write a method that updates the reactive variable

Use the reactive variable in the template with proper binding

💡 Why This Matters

🌍 Real World

Using TypeScript in Vue projects helps catch errors early and makes your code easier to understand and maintain.

💼 Career

Many companies use Vue with TypeScript for building scalable and robust web applications, so knowing this setup is valuable for frontend developer roles.

1

Create a Vue component with TypeScript setup

Create a Vue 3 component file named Counter.vue with a <script setup lang="ts"> block and an empty <template> block.

Vue

// Your code here



  

Hint

Use <script setup lang="ts"> to enable TypeScript in your Vue component.

2

Add a reactive variable with TypeScript type

Inside the <script setup lang="ts"> block, import ref from vue and create a reactive variable called count with type number initialized to 0.

Vue

// Import ref from vue
// Create a reactive variable count of type number initialized to 0
// Your code here



  

Hint

Use ref<number>(0) to create a reactive number variable.

3

Add a method to update the reactive variable

Inside the <script setup lang="ts"> block, create a function called increment that increases the value of count by 1.

Vue

import { ref } from 'vue'

const count = ref(0)

// Create a function increment that adds 1 to count.value
// Your code here



  

Hint

Remember to update the reactive variable's value using count.value.

4

Bind the reactive variable and method in the template

In the <template> block, display the current count value inside a <span> and add a <button> that calls the increment function when clicked.

Vue

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}



  
  

Hint

Use {{ count }} to show the value and @click="increment" on the button.