**computed — автовывод:** ```typescript import { ref, computed } from 'vue' const price = ref(100) const quantity = ref(3) const discount = ref(0.1) // Тип выведен из return const total = computed(() => price.value * quantity.value) // ComputedRef const summary = computed( () => `Total: ${total.value} items: ${quantity.value}`, ) // ComputedRef const isExpensive = computed(() => total.value > 500) // ComputedRef // Сложный return — тип тоже выводится const orderInfo = computed(() => ({ total: total.value, discount: total.value * discount.value, final: total.value * (1 - discount.value), })) // ComputedRef<{ total: number; discount: number; final: number }> ``` **computed — writable с типом:** ```typescript // Явный generic полезен для writable computed const fullName = computed({ get() { return `${firstName.value} ${lastName.value}` }, set(newValue) { // newValue — string благодаря generic const [first, ...rest] = newValue.split(' ') firstName.value = first lastName.value = rest.join(' ') }, }) ``` **watch — один source:** ```typescript import { ref, watch } from 'vue' const count = ref(0) // TypeScript знает, что newVal и oldVal — number watch(count, (newVal, oldVal) => { console.log(newVal) // number console.log(oldVal) // number }) // Getter const user = ref(null) watch( () => user.value?.name, (newName, oldName) => { // newName — string | undefined // oldName — string | undefined }, ) ``` **watch — множественные sources:** ```typescript const firstName = ref('John') const lastName = ref('Doe') const age = ref(30) // Tuple — типы выведены автоматически watch( [firstName, lastName, age], ([newFirst, newLast, newAge], [oldFirst, oldLast, oldAge]) => { // newFirst — string // newLast — string // newAge — number }, ) // Смешанные getter + ref watch( [() => route.params.id, isAuthenticated], ([newId, newAuth]) => { // newId — тип, возвращаемый getter // newAuth — boolean }, ) ``` **watchEffect — не нуждается в типизации:** ```typescript // watchEffect сам отслеживает зависимости, типы не нужны watchEffect(() => { // Все ref, к которым обращаешься, типизированы через свои объявления if (user.value && isReady.value) { fetchProfile(user.value.id) // id — number (из User) } }) ``` **watch с immediate и deep:** ```typescript interface Settings { theme: 'light' | 'dark' fontSize: number notifications: boolean } const settings = ref({ theme: 'light', fontSize: 14, notifications: true, }) watch( settings, (newSettings, oldSettings) => { // newSettings — Settings // oldSettings — Settings (или undefined при immediate: true) saveToLocalStorage(newSettings) }, { deep: true, immediate: true, // При immediate: true, oldSettings первый раз === undefined // TypeScript это знает: oldSettings — Settings | undefined }, ) ``` **watch с onCleanup (Vue 3.5+):** ```typescript watch(searchQuery, (query, oldQuery, onCleanup) => { const controller = new AbortController() onCleanup(() => controller.abort()) fetchResults(query, { signal: controller.signal }) .then((results) => { searchResults.value = results }) }) ``` --- ## 📌 Реальные кейсы 🔹 **Debounced watch:** ```typescript import { ref, watch } from 'vue' const searchQuery = ref('') const results = ref([]) watch(searchQuery, (query) => { // query — string if (query.length < 2) { results.value = [] return } debouncedSearch(query) }) ``` 🔹 **Computed с дженериком для типобезопасного маппинга:** ```typescript function useMapped( source: Ref, mapper: (item: T) => R, ): ComputedRef { return computed(() => source.value.map(mapper)) } const users = ref([]) const userNames = useMapped(users, (u) => u.name) // ComputedRef ``` --- ## Частые ошибки ❌ Указывать тип computed, когда он и так выводится: ```typescript // Избыточно const total = computed(() => price.value * quantity.value) ``` ✅ Авто-вывод работает: ```typescript const total = computed(() => price.value * quantity.value) // Уже number ``` --- ❌ Забывать, что `oldValue` может быть `undefined` при `immediate: true`: ```typescript watch( source, (newVal, oldVal) => { oldVal.doSomething() // Runtime error при первом вызове! }, { immediate: true }, ) ``` ✅ Проверяй: ```typescript watch( source, (newVal, oldVal) => { if (oldVal !== undefined) { // Безопасно — не первый вызов } }, { immediate: true }, ) ``` --- ❌ `watch` на reactive без getter — потеря old value: ```typescript const state = reactive({ count: 0 }) watch(state, (newVal, oldVal) => { // newVal === oldVal — один и тот же объект! // deep: true подразумевается для reactive }) ``` ✅ Для конкретного поля используй getter: ```typescript watch( () => state.count, (newCount, oldCount) => { // newCount и oldCount — разные значения }, ) ``` --- ## Резюме | API | Типизация | |---|---| | `computed(() => expr)` | Автовывод из return | | `computed({get, set})` | Явный generic для writable | | `watch(ref, cb)` | callback типизирован по inner type ref | | `watch(() => x, cb)` | callback типизирован по return getter | | `watch([a, b], cb)` | callback получает typed tuple | | `watchEffect(cb)` | Типизация не нужна | 🔑 TypeScript выводит типы computed и watch почти всегда. Явный generic нужен только для writable computed. Помни про `undefined` в oldValue при `immediate: true`. ---

Как типизировать computed и watch с TypeScript?