💚 Vue.js Intermediate

How does Vue 3 handle TypeScript?

Why Interviewers Ask This

Mid-level Vue.js roles require deep understanding of this topic. Interviewers ask this to separate candidates who truly understand the mechanics from those who only know surface-level concepts.

Answer

Vue 3 was rewritten in TypeScript and has first-class TypeScript support. Script setup with TypeScript: the most ergonomic approach — TypeScript works naturally in <script setup lang="ts">. Typed props: interface User { id: number; name: string; email?: string; } const props = defineProps<{ user: User; count?: number; items: string[] }>(); withDefaults(defineProps<{ count?: number }>(), { count: 0 });. Typed emits: const emit = defineEmits<{ "update:modelValue": [value: string]; submit: [data: FormData] }>();. Typed refs: const count = ref<number>(0); const user = ref<User | null>(null); const inputEl = ref<HTMLInputElement | null>(null);. Typed reactive: const state = reactive<{ users: User[]; loading: boolean }>({ users: [], loading: false });. Typed provide/inject: use InjectionKey symbol: export const userKey: InjectionKey<User> = Symbol("user"); provide(userKey, user); const user = inject(userKey); — TypeScript infers the type. Typed component ref: const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);. PropType for runtime validation: defineProps({ user: { type: Object as PropType<User>, required: true } }). Component type: import type { ComponentPublicInstance } from "vue";. Shims: vue-tsc for type-checking templates (runs in CI/CD). npx vue-tsc --noEmit.

Pro Tip

This topic has Vue.js-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.