MartinMalinda / vue-concurrency

A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.
https://vue-concurrency.netlify.app/
MIT License
352 stars 15 forks source link

ESLint Error: Unsafe assignment of an 'any' value. #65

Open BenJackGill opened 2 years ago

BenJackGill commented 2 years ago

I'm using vue-concurrency with TypeScript and ESLint.

I am aware of the TypeScript limitations and that intermediate values need to be explicily typed or else they will be given a type of any.

But after typing my intermediate values ESLint still complains about the any value: Unsafe assignment of an 'any' value. eslint(@typescript-eslint/no-unsafe-assignment)

Here is my full code, with comment on the error line:

import { db } from 'src/firebase/config';
import { doc, getDoc, DocumentSnapshot } from 'firebase/firestore';
import { useTask } from 'vue-concurrency';

const getDocumentTask = useTask(function* (
  signal,
  collectionName: string,
  documentId: string
) {
  const documentReference = doc(db, collectionName, documentId);
  const response: DocumentSnapshot = yield getDoc(documentReference); // <-- EsLint error here
  const document: Record<string, unknown> = {
    ...response.data(),
    documentId: response.id,
  };
  return document;
});

export default getDocumentTask;

Is this a bug or am I doing something wrong?

I could disable the ESLint error with // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment but I would rather solve the problem instead of disabling it.

MartinMalinda commented 2 years ago

Yes, I'm afraid with the yield limitations you pretty much have to do an "unsafe assignment". I'm looking here: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-unsafe-assignment.md and maybe some solution with the unknown could be tried. But I'm not sure if I can make yield operations return unknown instead of any. I'm afraid my TS knowledge is not extensive enough.

But you can take a look at useAsyncTask: https://vue-concurrency.netlify.app/api-overview/other/#useasynctask The cancellation of useAsyncTask is less effective (the code within async function cannot be cancelled will just finish running), but in practice it's super OK to use for small tasks that have no or just one await. It should definitely be avoided if you use some concurrency modifiers like drop() or restartable().

BenJackGill commented 2 years ago

Thanks for the details.

I'll head down this rabbit hole after I successfully refactor my code to use vue-concurrency.

For now I'll just disable it, and report back here with any solutions I find in the future.