How to type watch in Vue 3 with TypeScript?

Question

Accepted Answer

**watch** — typed watchers.

```typescript
import { ref, watch } from "vue"

const count = ref(0)

// Basic watch
watch(
    count,
    (newVal: number, oldVal: number) => {
        console.log(`${oldVal} -> ${newVal}`)
    }
)

// Multiple sources
const firstName = ref("John")
const lastName = ref("Doe")

watch(
    [firstName, lastName],
    ([newFirst, newLast]: [string, string], [oldFirst, oldLast]) => {
        console.log("Name changed")
    }
)
```

**With getter:**
```typescript
watch(
    () => state.user,
    (newUser: User | null, oldUser: User | null) => {
        console.log("User changed")
    }
)
```

Vue.js: How to type watch in Vue 3 with TypeScript?