Vue TypeScript Explained — Type-Safe Vue Components

In this tutorial, you will learn about Vue TypeScript Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

TypeScript integration in Vue 3 provides type safety for props, emits, refs, and computed properties, catching type errors at compile time instead of runtime.

What You'll Learn

• TypeScript setup with Vue
• Typing props with defineProps
• Typing emits with defineEmits
• Typing ref and reactive
• Component generics

Why It Matters

TypeScript prevents bugs by catching type mismatches during development. Vue 3's Composition API was designed with TypeScript in mind, providing excellent type inference.

<script setup lang="ts">
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "viewer";
}

interface Props {
  user: User;
  variant?: "compact" | "full";
  onSelect?: (id: number) => void;
}

const props = withDefaults(defineProps<Props>(), {
  variant: "compact",
});

const emit = defineEmits<{
  (e: "select", id: number): void;
  (e: "update", user: Partial<User>): void;
}>();

const count = ref<number>(0);
const user = reactive<User>({ id: 1, name: "Alice", email: "alice@example.com", role: "admin" });

const isAdmin = computed<boolean>(() => props.user.role === "admin");
</script>

Expected output: TypeScript provides full Type Checking for props, emits, refs, reactive objects, and computed properties in Vue 3 components.