YouTip{{ user.name}}
{{ user.email}}
Count:{{ count }}
Doubled:{{ doubled }}
Ts Vue3
Vue 3 has excellent support for TypeScript. This tutorial introduces development practices with Vue 3 + TypeScript.
The Composition API of Vue 3 and the type system of TypeScript combine perfectly, making the code safer and easier to maintain.
> View Vue3 Tutorial: [
* * *
* * *
## Why Use TypeScript in Vue 3
From its design inception, Vue 3 fully embraces TypeScript, providing excellent type support.
The functional style of the Composition API works perfectly with TypeScript's type system: ref supports generics, computed has type inference, and props have complete type checking.
Using TypeScript can provide type protection for properties, events, and reactive data in Vue components.
> **Native Support:** The source code of Vue 3 is written in TypeScript and integrates seamlessly with it.
* * *
## Creating a Project
Use Vite to create a Vue 3 project that supports TypeScript.
## Initialization
# Create a Vue 3 + TypeScript Project Using Vite (Recommended)
npm create vite@latest my-vue-app ----template vue-ts
# Enter the project directory
cd my-vue-app
# Install dependencies
npm install
> **Recommended:** Vite is the official build tool recommended by Vue. Simply choose the vue-ts template when creating a project.
* * *
## Component Types
Define component and Props types using defineComponent and PropType.
## src/components/UserCard.vue
import{ defineComponent, PropType } from 'vue'
// Define user type interface
interface User {
id: number
name: string
email: string
}
export default defineComponent({
name:'UserCard',
// Props definition
props:{
// Use PropType for type declaration
user:{
type:Object as PropType,
required:true
}
},
// Declare events emitted by the component
emits:['edit'],
setup(props,{ emit }){
// Handle edit click
const handleEdit =()=>{
emit('edit', props.user)
}
return{ handleEdit }
}
})
**Result:**
UserCard component rendered successfully
> **PropType:** When the prop type is a complex object, you need to use PropType for type assertion.
* * *
## Composition API Types
When using reactive APIs like ref and computed, TypeScript provides full type support.
## src/components/Counter.vue
import{ ref, computed } from 'vue'
export default{
setup(){
// ref: define reactive data, generic specifies type
const count = ref(0)
// computed: computed property, automatically infers return type
const doubled = computed(()=> count.value*2)
// Define methods
const increment =()=>{
count.value++
}
const decrement =()=>{
count.value--
}
return{ count, doubled, increment, decrement }
}
}
**Result:**
Counter component rendered successfully
> **Type Inference:** Vue 3's Composition API automatically infers types based on initial values; for complex types, explicitly specify generics.
* * *
## Interface Definitions
Centralize your project's type interfaces in the types directory.
## src/types/index.ts
// User type definitions
export interface User {
id: number // User ID
name: string // Username
email: string // Email
avatar?: string // Avatar (optional)
}
// Data Transfer Object for creating users
export interface CreateUserDTO {
name: string // Username
email: string // Email
password: string // Password
}
// Generic API response type
export interface ApiResponse{
success:boolean// Whether successful
data?: T // Data when successful
error?: string // Error message when failed
}
> **Centralized Type Management:** Place type definitions in the types directory for reuse across multiple components.
* * *
## Notes
* **defineComponent:** Provides full type inference
* **PropType:** Required for complex prop types
* **ref Generics:** Explicitly specify for complex types
* **emits:** Declare event types
> **Best Practice:** Vue 3 recommends using Composition API + TypeScript for the best development experience.
* * *
## Summary
Vue 3 and TypeScript integrate perfectly.
* **defineComponent:** Get full type inference
* **PropType:** Provide type safety for props
* **ref:** Specify reactive types via generic parameters
* **computed:** Automatically infer computed property types
> **Recommendation:** Strongly recommend using TypeScript in Vue 3 projects, especially in large applications.