TypeScript enhances Vue 3 projects with type safety and improved tooling, especially when using the Composition API. To set up Vue 3 with TypeScript, use Vite or Vue CLI, install required packages, create a tsconfig.json file, and rename .js files to .ts. When using the Composition API, define props and emits with defineProps and defineEmits for better type control. Use ref and reactive with explicit types to ensure correct data handling, and apply toRefs when destructuring reactive objects to preserve reactivity. Lifecycle hooks require no extra typing, but custom functions should be annotated for clarity and reuse, ensuring robust and maintainable code across components.

TypeScript brings type safety and better tooling to Vue 3 projects, especially when using the Composition API. To make the most of it, you need to set things up right and follow a few key practices.

Setting Up Vue 3 with TypeScript

The easiest way to start is by using Vite or Vue CLI. If you're using Vite, just select the Vue TypeScript option during setup. That gives you a working project structure out of the box.

If you're adding TypeScript to an existing Vue project, install the necessary packages:

• typescript
• ts-loader (if using webpack)
• @vitejs/plugin-vue and @vitejs/plugin-vue-jsx if needed
• Optionally, @types/vue for better type definitions

Then create a tsconfig.json file in your root directory. A basic config might look like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": false,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "outDir": "./dist"
  },
  "include": ["./src/**/*"]
}

Also, make sure to rename your .js files to .ts and update any Vue components to use <script lang="ts">.

Using TypeScript with the Composition API

When writing components with the Composition API, you’ll typically use <script setup> with TypeScript. This allows for a clean syntax while still getting all the benefits of types.

For example, here’s how you’d define props:

<script setup lang="ts">
interface Book {
  title: string
  author: string
  pages?: number
}

const props = defineProps<Book>()
</script>

This ensures that wherever this component is used, it must receive the correct data shape. It also improves IDE support — you get auto-completion and inline errors as you code.

You can also define emits with defineEmits, which makes event handling more predictable:

const emit = defineEmits<{
  (e: 'update', value: string): void
}>()

This helps avoid typos and makes your events easier to manage across larger apps.

Working with Reactive State and Refs

When using ref or reactive, TypeScript can infer types automatically in many cases. But sometimes you need to be explicit.

For example:

const count = ref<number>(0)

This tells TypeScript that count.value should always be a number.

With reactive, you can define interfaces or types upfront:

interface User {
  name: string
  age: number
}

const user = reactive<User>({
  name: 'Alice',
  age: 25
})

This makes it easier to catch mistakes early — like trying to assign a string to user.age.

One thing to watch out for: when destructuring reactive objects, you may lose reactivity unless you use toRefs. So instead of:

const { name } = user // loses reactivity

Use:

const { name } = toRefs(user)

That keeps the reactivity intact while still giving you access to individual properties.

Handling Setup and Lifecycle Types

Vue 3’s lifecycle hooks are imported functions in the Composition API, so typing them is straightforward.

For example:

import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

No extra typing needed — the function signature already includes expected parameters.

But if you’re writing custom logic that expects specific types, it’s good practice to annotate those:

function fetchData(callback: (data: string[]) => void) {
  // fetch and call callback
}

This makes your functions easier to understand and reuse across components.

That's pretty much it for integrating TypeScript into a Vue 3 project using the Composition API. It's not overly complex, but there are enough small details to pay attention to — especially around props, state, and setup.

The above is the detailed content of How can TypeScript be effectively integrated into a Vue 3 project, particularly with the Composition API?. For more information, please follow other related articles on the PHP Chinese website!