Vue Typescript 回调：隐含类型为 any

Question

在我的 vue 组件中使用带有 lodash debounce 的匿名函数作为 watch 选项时，我得到了 typescript 编译器错误“this implicitly has type any.

这是我的组件

export default defineComponent({
  data(){
    return {
       filters:{
          filter1: "foo"
       } as Record<string, string>
    }
  },
  methods:{
    load(){
       //load function
    }
  },
  watch:{
    "filters":{
       deep: true,
       handler:_debounce(function(newValue){
           this.load() // <= hear I got "this implicitly has type any"
       }, 500)
    }
  }
})

我在这个 post 上发现我的匿名去抖动回调函数使用了箭头函数，但错误仍然存在 ()

另一种解决方案是将“this:any”作为参数传递给函数，但我发现这非常难看。

_debounce(function(this:any, newValue){
           this.load() // <= hear I got "this implicitly has type any"
       }, 500)

是否有更好的解决方案来处理这个问题？（没有将 noImplicitAny 设置为 false）

Answer 1

尝试使用 'arrow' 函数定义，以保持 this 的范围。

handler:_debounce(() => {
       this.load() 
   }, 500)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

编辑：对于这种情况，打字稿中的一些设计限制使得难以 detect/assign 隐式 this 的类型（参见 https://github.com/microsoft/TypeScript/issues/38845#issuecomment-651455328) 它应该使用带有类型化参数的函数表达式，在自定义接口中定义，例如：

interface ComponentInterface {
  load(): void
}

然后：

_debounce(function(this:ComponentInterface, newValue){
       this.load()
   }, 500)

你可以在https://v3.vuejs.org/guide/typescript-support.html#using-with-options-api

找到几个使用这种方式定义types/annotations的案例

Vue Typescript 回调：隐含类型为 any

Vue Typescript callback: this implicitly has type any

compiler-construction

typescript

vue.js

debounce