Vue组件watch用lodash debounce回调出现TS this隐式any错误如何解决

问题根因 #

lodash的debounce包裹的函数会丢失Vue给watch handler自动绑定的组件实例上下文，TypeScript无法推导该函数内this的实际类型，因此抛出隐式any错误。你之前用箭头函数报错是因为箭头函数的this绑定的是定义时的上层上下文，watch配置对象的上层上下文并非组件实例，运行时也无法正确访问组件方法。

最优解决方案 #

以下两种方案均符合noImplicitAny=true的要求，且类型安全：

方案1：标注精准的this类型（适配Options API）

不要给this标注any，直接用Vue提供的组件实例类型标注，可获得完整的类型提示：

import type { ComponentPublicInstance } from 'vue'
import _debounce from 'lodash/debounce'

export default defineComponent({
  data(){
    return {
       filters:{
          filter1: "foo"
       } as Record<string, string>
    }
  },
  methods:{
    load(){
       //load function
    }
  },
  watch:{
    "filters":{
       deep: true,
       handler:_debounce(function(this: ComponentPublicInstance<{}, {}, { load: () => void }>, newValue){
           this.load() // 类型完全正常，无报错
       }, 500)
    }
  }
})

如果组件属性较多，可以提前抽离组件实例类型，简化标注：

import _debounce from 'lodash/debounce'

const MyComponent = defineComponent({
  // 原有组件配置不变
})
// 抽离实例类型，包含所有data、methods、computed的类型定义
type MyComponentInstance = InstanceType<typeof MyComponent>

export default MyComponent

之后handler的this直接标注为this: MyComponentInstance即可。

方案2：提前初始化防抖函数（更稳妥，适配所有版本）

直接在watch内包裹debounce存在内存泄漏风险，组件销毁时防抖任务不会自动取消，推荐将防抖函数初始化放在生命周期中，同时天然解决this类型问题：

import _debounce from 'lodash/debounce'

export default defineComponent({
  data(){
    return {
       filters:{
          filter1: "foo"
       } as Record<string, string>,
       debouncedLoad: null as (() => void) | null
    }
  },
  created() {
    // 此处的this TS可自动推导为组件实例类型
    this.debouncedLoad = _debounce(() => {
      this.load()
    }, 500)
  },
  // 组件销毁时取消防抖，避免内存泄漏
  beforeUnmount() {
    this.debouncedLoad?.cancel()
  },
  methods:{
    load(){
       //load function
    }
  },
  watch:{
    "filters":{
       deep: true,
       handler() {
         this.debouncedLoad()
       }
    }
  }
})

方案3：使用Setup语法（Vue3推荐）

完全避开this相关的类型问题，代码更简洁：

import { defineComponent, watch, reactive } from 'vue'
import _debounce from 'lodash/debounce'

export default defineComponent({
  setup() {
    const filters = reactive({
      filter1: "foo"
    })
    const load = () => {
      // load逻辑
    }
    const debouncedLoad = _debounce(load, 500)

    watch(() => filters, debouncedLoad, { deep: true })

    return {
      filters
    }
  }
})

内容的提问来源于stack exchange，提问作者Nico