Setting up TypeScript in Vue project - Practice Exercises

Challenge - 5 Problems

📝 Syntax

intermediate

Correct TypeScript setup in Vue component

Which option shows the correct way to declare a Vue 3 component using TypeScript with the Composition API?

Vue

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

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

A

<script lang="ts">
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count++
}
</script>

B

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
  count.value++
}
</script>

C

<script setup>
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
  count.value++
}
</script>

D

<script setup lang="ts">
import { ref } from 'vue'
const count = ref('0')
function increment() {
  count.value++
}
</script>

💡 Hint

Remember to specify lang="ts" and use .value to update refs.

Option B correctly uses lang="ts" in the <script setup> block, declares count as a ref<number>, and increments count.value. This follows Vue 3 Composition API with TypeScript.

Option B misses setup and incorrectly increments count directly.

Option B misses lang="ts", so TypeScript is not enabled.

Option B sets count as a string ref, causing a type mismatch when incrementing.

❓ component_behavior

intermediate

TypeScript prop typing in Vue component

Given this Vue component using TypeScript, what is the type of the prop title inside the component?

Vue

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

const props = defineProps<{ title: string }>()
</script>

<template>
  <h1>{{ title }}</h1>
</template>

A string

B any

C number

D undefined

💡 Hint

Check the type declared inside defineProps.

The defineProps<{ title: string }>() declares title as a string prop. So inside the component, title is typed as string.

🔧 Debug

advanced

Identify the TypeScript error in Vue component

What TypeScript error will this Vue component produce?

Vue

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

const count = ref(0)
function increment() {
  count++
}
</script>

A TS2363: The operand of an increment or decrement operator must be a variable, property or indexer.

B TS2362: The left-hand side of an assignment expression must be a variable or a property access.

C TypeError: count is not a number

D TS2339: Property 'value' does not exist on type 'number'.

💡 Hint

Remember how to update a ref value in Vue with TypeScript.

The variable count is a ref object, so you must increment count.value, not count directly. Incrementing count++ causes error TS2363 because count is not a variable holding a number but a ref object.

🧠 Conceptual

advanced

Why use lang="ts" in Vue <script>?

What is the main purpose of adding lang="ts" attribute to the <script> tag in a Vue component?

A It makes the component compatible only with Vue 2 projects.

B It automatically converts JavaScript code to TypeScript at runtime.

C It disables JavaScript and only allows TypeScript syntax.

D It enables TypeScript support and type checking inside the script block.

💡 Hint

Think about what TypeScript does during development.

Adding lang="ts" tells the Vue build system to treat the script block as TypeScript, enabling type checking and TS features during development and build time.

It does not convert JS to TS at runtime (B), nor disables JS entirely (C), nor restricts Vue version (D).

❓ state_output

expert

Output of Vue component with TypeScript reactive state

What will be the rendered output after clicking the button twice in this Vue component?

Vue

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

const state = reactive({ count: 0 })
function increment() {
  state.count++
}
</script>

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

A Clicked NaN times

B Clicked 0 times

C Clicked 2 times

D Clicked undefined times

💡 Hint

Check how reactive state updates and reflects in template.

The reactive object state has a count property initialized to 0. Each click increments state.count by 1. After two clicks, state.count is 2, so the button text shows "Clicked 2 times".