TypeScript and Vue 3 are a match made in developer heaven. The Composition API was designed with TypeScript in mind, and the integration is seamless. Here's how to make the most of it.
Why TypeScript with Vue?
I resisted TypeScript for years. "JavaScript is fine," I told myself. Then I worked on a large Vue codebase without it. The refactoring nightmares, runtime errors, and "undefined is not a function" bugs convinced me otherwise.
TypeScript catches errors at compile time, provides incredible autocomplete, and makes refactoring confident instead of terrifying.
Setting Up Your Project
Modern Vue projects (via Vite) make TypeScript setup trivial. Just choose TypeScript when creating your project, and you're 90% there.
The tsconfig.json needs a few key flags for the best Vue experience. Strict mode is your friend—yes, it's more upfront work, but it prevents entire classes of bugs.
Typing Components
The Composition API with script setup and TypeScript is beautiful. Vue's reactivity system infers types automatically in most cases.
For refs, you rarely need explicit type annotations. TypeScript infers the type from the initial value. For computed properties, inference works great too.
Only add explicit types when the initial value is null or when you need a more specific type than TypeScript can infer.
Typing Props
Props are where TypeScript really shines. The old PropTypes syntax is gone. Now you define an interface and use defineProps with a generic.
This gives you full TypeScript checking in both the parent (when passing props) and the child (when using them). Autocomplete works perfectly, and you catch prop type mismatches at compile time.
Typing Emits
Events get the same treatment. Define an interface for your events, and defineEmits ensures type safety. Parents know exactly what events a component can emit and what data they carry.
This is huge for large codebases where you might not remember what events a component emits or what shape their payloads have.
Typing Composables
Composables are where Vue's TypeScript integration really shines. A composable is just a function, and TypeScript handles function types beautifully.
Return types are inferred automatically in most cases. The consuming component gets full type safety without any extra work.
Working with Refs
One gotcha: ref types need the .value suffix. TypeScript enforces this, which prevents the classic Vue 2 mistake of forgetting .value.
The type of myRef.value is what matters. TypeScript tracks this separately from the ref wrapper itself.
Generic Components
Advanced use case: generic components. These are components that work with any type, like a reusable data table.
Vue 3.3+ supports generics in script setup. You can define a component that accepts props of any type while maintaining full type safety.
Type Utilities
Vue provides several utility types that make TypeScript integration smoother. ComponentPublicInstance for component types, PropType for complex prop types, and more.
These utilities bridge the gap between Vue's reactivity system and TypeScript's type system.
The DevEx Payoff
The initial learning curve is real. But once you're comfortable, TypeScript makes Vue development faster, not slower.
Autocomplete tells you what props a component accepts. Hover tooltips show you function signatures. Refactoring is safe. Bugs are caught at build time, not in production.
Wrapping Up
TypeScript isn't just a nice-to-have in modern Vue development—it's becoming the default. The Composition API's design makes TypeScript integration seamless.
Start with one component. Add types gradually. The autocomplete and error prevention will win you over quickly.
Your future self will thank you when refactoring that component six months from now.