How to use Vue Concurrency inside Pinia? TypeScript error: 'this' implicitly has type 'any' because it does not have a type annotation. ts(2683)

Question

的 Vue 3 / TypeScript 应用程序

而且我一直在玩，看看我是否可以使用 Vue 并发 inside Pinia。

这是我目前在 Pinia 拥有的：

import { defineStore } from 'pinia';
import { User } from 'src/types';
import { useUpdateDocTask } from 'src/composables/database';
import { useTask } from 'vue-concurrency';

const updateDocTask = useUpdateDocTask();

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      user: {} as User,
    };
  },
  actions: {
    setFirstNameTask() {
      return useTask(function* (signal, firstName: string) {
        this.user.firstName = firstName; // ERROR HERE
        yield updateDocTask.perform('users', this.user.uid, { // ERROR HERE
          firstName,
        });
      });
    },
});

但是我在 this:

的所有实例上都收到这些 TypeScript 和 Eslint 错误

this' implicitly has type 'any' because it does not have a type annotation. ts(2683)

user.ts(38, 22): An outer value of 'this' is shadowed by this container.

Unsafe member access .user on an `any` value.eslint @typescript-eslint/no-unsafe-member-access

是否可以克服这些错误？

如何才能正确完成？

Answer 1

这是this common problem的一个特例，问题是生成器函数没有对应的箭头，需要绑定才能正确this，并且输入正确

考虑到 useTask 不提供绑定回调上下文和推断 thisArg 类型的特定功能，它将作为：

  type This = typeof this;

  return useTask(function* (this: This, signal, firstName: string) {
    this.user...
    ...
  }.bind(this));

或使用 old-fashioned self = this 食谱：

  const state = this;
  return useTask(function* (signal, firstName: string) {
    state.user...
    ...
  });

How to use Vue Concurrency inside Pinia? TypeScript error: 'this' implicitly has type 'any' because it does not have a type annotation. ts(2683)

How to use Vue Concurrency inside Pinia? TypeScript error: 'this' implicitly has type 'any' because it does not have a type annotation. ts(2683)

typescript

vue.js

vuejs3

pinia