Why TypeScript matters in Vue - See It in Action

Why TypeScript matters in Vue

📖 Scenario: You are building a small Vue app to display user profiles. You want to make sure your code is clear and safe from common mistakes.

🎯 Goal: Create a Vue component using TypeScript to define user data and display it safely.

📋 What You'll Learn

Create a reactive user object with exact properties

Add a TypeScript interface for the user data

Use the interface to type the reactive user object

Display the user name and age in the template

💡 Why This Matters

🌍 Real World

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

💼 Career

Many companies use TypeScript with Vue to build reliable web apps. Knowing how to combine them is a valuable skill for frontend developers.

1

Set up user data with TypeScript interface

Create a TypeScript interface called User with properties name as string and age as number.

Vue

// Your code here

Hint

Use interface User { name: string; age: number; } to define the user shape.

2

Create reactive user object with type

Create a reactive variable called user of type User with name set to 'Alice' and age set to 30 using Vue's ref or reactive.

Vue

interface User {
  name: string;
  age: number;
}

// Your code here

Hint

Use const user = reactive<User>({ name: 'Alice', age: 30 }) to create typed reactive data.

3

Add template to display user data

Add a Vue template that displays the user's name inside an <h1> and the age inside a <p>.

Vue

import { reactive } from 'vue';

interface User {
  name: string;
  age: number;
}

const user = reactive({
  name: 'Alice',
  age: 30
});

// Your code here

Hint

Use <h1>{{ user.name }}</h1> and <p>{{ user.age }}</p> inside the template.

4

Complete component with accessibility and typing

Add aria-label="User Profile" to the <h1> tag and ensure the script uses lang="ts" for TypeScript support.

Vue

  {{ user.name }}
  {{ user.age }}



import { reactive } from 'vue';

interface User {
  name: string;
  age: number;
}

const user = reactive({
  name: 'Alice',
  age: 30
});

Hint

Add aria-label="User Profile" to the <h1> for accessibility and confirm lang="ts" is in the script tag.