如何让打字稿方法回调在 VueJs 中工作？

Question

我正在使用 typescript 使用 vuejs 进行开发，并面临方法回调工作的问题。我基本上是在尝试通过将数据包装在去抖动函数中来更新我的数据。我正在使用来自https://www.npmjs.com/package/ts-debounce 模块的去抖功能。下面是代码示例：

import { debounce } from 'ts-debounce';

export default Vue.extend({
    name: 'HelloWorld',
    data() {
        return {
            input: '# hello',
        };
    },

    methods: {
        updateWithDebounce: debounce(function(e: any) {
            this.input = e.target.value;
        }, 2000),

       update(e: any) {
            this.input = e.target.value;
        },
    }

此代码在功能上有效，但因编译错误而失败：

'this' 隐式具有类型'any'，因为它没有类型注释。 40 | 41 | updateWithDebounce: debounce(function(e: any) {

42 | this.input = e.target.value; | ^ 43 | }, 2000), 如果有人可以帮助我解决此错误，将不胜感激。

Answer 1

这根本不可能。类型信息在 debounce 函数创建的闭包之间丢失。使用 Vue，this 上下文被计算为一个组合实例。目前，没有办法将其正确传递给去抖函数。

在这种情况下，您有两种选择：

methods: {
    // set this pointer to explicitly any. But you will lose typing info.
    updateWithDebounce: debounce(function(this: any, e: any) {
        this.input = e.target.value;
    }, 2000),
}

其次，您可以使用箭头功能，这将保留输入信息：

methods: {
    // set this pointer to explicitly any. This will mask your typing info though.
    updateWithDebounce() {
        // call debounced function immediately.
        debounce(() => this.input = e.target.value, 2000)();
    },
}

但是，这显然是低效的。

另外，我不建议您以这种方式使用去抖动。想象一下你有一个延迟为2000ms 的去抖函数。如果你的Vue组件在这期间被破坏了，那肯定会出事。我认为ts-debounce 不知道 Vue 组件何时被销毁。

正确的方法是使用Rxjs 流或Observables 之类的东西进行去抖动。或者构建自己的辅助函数。

最后，您可以使用类语法vue-class-component 并像这样构建自己的装饰器：

@Component({})
export default class SimpleComponent extends Vue {

    // Selected value of each menu item
    public someValue = 1;

    public data() {

        return {
            // Some data...
        };
    }

    @Debounce(2000)
    public updateWithDebounce() {

    }
}

构建自己的去抖动器并不难：https://github.com/bvaughn/debounce-decorator