Encountering a TypeScript compiler error while using an anonymous function with lodash debounce in my Vue component's watch option. The error states: "this implicitly has type any."
Below is the code snippet of my component:
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() // <= here I got "this implicitly has type any"
}, 500)
}
}
})
After researching, I tried using an arrow function for the anonymous debounce callback function as suggested in this post. However, the error persisted (TS2683(TS) 'this' implicitly has type 'any' because it does not have a type annotation).
Another workaround involves passing "this: any" as an argument to the function, but this method is considered unsightly.
_debounce(function(this:any, newValue){
this.load() // <= here I got "this implicitly has type any"
}, 500)
Is there a more elegant solution to address this issue without resorting to setting noImplicitAny to false?