Struggling with types for Getters

[jtuchel]

Hey there,
the following code shows a passing sample test without typing.

I want to use the composition API style and followed

• https://pinia.esm.dev/core-concepts/getters.html
• https://pinia.esm.dev/introduction.html#basic-example (starting at "You can even use a function (similar to a component setup()) to define a Store...")

import { defineStore, setActivePinia, createPinia } from "pinia";
import { computed, ComputedRef, ref, Ref } from "vue";

/*
    Define a custom type for demo purposes
*/
type MyValue = { isTrue: boolean; createdAt: Date };

/*
    Define the store using the composition API
*/
const useStore = defineStore("myValues", () => {
  const myValues: Ref<MyValue[]> = ref([]);

  const myTruthyValues: ComputedRef<MyValue[]> = computed((): MyValue[] => 
    myValues.value.filter((myValue: MyValue) => myValue.isTrue));

  return { myTruthyValues };
});

/*
    Use the store somewhere in the project
*/
describe("Store", (): void => {
  beforeEach((): void => {
    setActivePinia(createPinia());
  });

  it("returns truthy values only", (): void => {
    const myValuesStore = useStore();

    expect(myValuesStore.myTruthyValues.every(myValue => myValue.isTrue)).toBeTruthy();
  });
});

First:

The code looks not correct to me. Since myTruthyValues is of type ComputedRef<MyValue[]> I think it should be myTruthyValues.value instead but then I get this error

        Property 'value' does not exist on type '{ isTrue: boolean; createdAt: { toString: () => string; 
        toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, 
        options?: DateTimeFormatOptions | undefined): string; }; ... 40 more ...; [Symbol.toPrimitive]: { ...; }; }; }[]'. 
        Did you mean 'values'?ts(2551)

myTruthyValues.values() exists but this does not return MyValue[] so I can't use the function .every() on it.

Second:

I think this is related to the first problem. But when trying to add types to the .every() function like so

expect(myValuesStore.myTruthyValues.every((myValue: MyValue) => myValue.isTrue)).toBeTruthy();

the test throws this error

         TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
            tests/unit/example.spec.ts:53:42 - error TS2769: No overload matches this call.
              Overload 1 of 2, '(predicate: (value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, array: { ...; }[]) => value is { ...; }, thisArg?: any): this is { ...; }[]', gave the following error.
                Argument of type '(myValue: MyValue) => boolean' is not assignable to parameter of type '(value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, arr...'.
                  Types of parameters 'myValue' and 'value' are incompatible.
                    Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.
                      Types of property 'createdAt' are incompatible.
                        Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }' but required in type 'Date'.
              Overload 2 of 2, '(predicate: (value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, array: { ...; }[]) => unknown, thisArg?: any): boolean', gave the following error.
                Argument of type '(myValue: MyValue) => boolean' is not assignable to parameter of type '(value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, arr...'.
                  Types of parameters 'myValue' and 'value' are incompatible.
                    Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.

            53       myValuesStore.myTruthyValues.every((myValue: MyValue) => myValue.isTrue)
                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

              node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts:114:5
                114     [Symbol.toPrimitive](hint: "default"): string;
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                '[Symbol.toPrimitive]' is declared here.

I think it is struggling with the Date type. When removing this field the error doesn't occur.

Am I wrong? Any ideas?

[posva]

You should type things by passing a generic to ref and computed:

const myValues = ref<MyValue[]>([]);
const myTruthyValues = computed<MyValue[]>(() => ...)

Note this is not specific to Pinia, it's more about TS and generics and the exposed types for the composition API

[posva]

Double check the example I showed you. Remove the : Ref<...> part too.

[jtuchel]

Double check the example I showed you. Remove the : Ref<...> part too.

Hmm I checked and changed it to

import { defineStore, setActivePinia, createPinia } from "pinia";
import { computed, ref } from "vue";

/*
    Define a custom type for demo purposes
*/
type MyValue = { isTrue: boolean; createdAt: Date; };

/*
    Define the store using the composition API
*/
const useStore = defineStore("myValues", () => {
  const myValues = ref<MyValue[]>([]);

  const myTruthyValues = computed<MyValue[]>(() => 
    myValues.value.filter(myValue => myValue.isTrue));

  return { myTruthyValues };
});

/*
    Use the store somewhere in the project
*/
describe("Store", () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it("returns truthy todos", () => {
    const myValuesStore = useStore();

    expect(myValuesStore.myTruthyValues.every(myValue => myValue.isTrue)).toBeTruthy();
  });
});

So I tried to remove all the types but the problem remains

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/unit/example.spec.ts:15:26 - error TS2769: No overload matches this call.
      Overload 1 of 2, '(getter: ComputedGetter<MyValue[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<MyValue[]>', gave the following error.
        Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }[]' is not assignable to type 'MyValue[]'.
          Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.
            Types of property 'createdAt' are incompatible.
              Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }' but required in type 'Date'.
      Overload 2 of 2, '(options: WritableComputedOptions<MyValue[]>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<MyValue[]>', gave the following error.
        Argument of type '() => { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }[]' is not assignable to parameter of type 'WritableComputedOptions<MyValue[]>'.
          Type '() => { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }[]' is missing the following properties from type 'WritableComputedOptions<MyValue[]>': get, set

    15   const myTruthyValues = computed<MyValue[]>(() =>
                                ~~~~~~~~~~~~~~~~~~~~~~~~~
    16     myValues.value.filter(myValue => myValue.isTrue));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts:114:5
        114     [Symbol.toPrimitive](hint: "default"): string;
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        '[Symbol.toPrimitive]' is declared here.
      node_modules/@vue/reactivity/dist/reactivity.d.ts:13:41
        13 export declare type ComputedGetter<T> = (...args: any[]) => T;
                                                   ~~~~~~~~~~~~~~~~~~~~~
        The expected type comes from the return type of this signature.

[posva]

You might have a problem misconfiguration. I recommend you sharing your project/config here and/or on https://chat.vuejs.org

[jtuchel]

@posva does it work on your machine?

I didn't configure anything, it just the basic Vue CLI setup

But thanks, I will try.

[posva]

In your case you can actually write the computed without the explicit type declaration:

  const myTruthyValues = computed(() => 
    myValues.value.filter(myValue => myValue.isTrue));