Confused with returning Ref<T> as a type to a Pinia state

[philippedasilva-orizone]

Hi,

I'm slightly confused with Pinia and Typescript...

I am creating a simple Authentication store where I'm initializing my Pinia store state using useStorage from VueUse so that I don't lose my user session when reloading the page.
Note that the code below actually executes perfectly while I believe it shouldn't...

import firebase from 'firebase/app';
import 'firebase/auth';
import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';
import { router } from '../routes';
import { Authentication } from 'origami-common';

export const useAuthenticationStore = defineStore({
    id: "authentication",
    state() {
        return useStorage<Authentication.UserProfile>(
            "user",
            { accessToken: "", displayName: "", photoUrl: "", emailAddress: "" },
            localStorage);
    },
    getters: {
        isAuthenticated: (state) => state.accessToken !== "",
        getToken: (state) => state.accessToken
    },
    actions: {
        async signInWithGoogle() {
            const provider = new firebase.auth.GoogleAuthProvider();
            provider.addScope("https://mail.google.com");
            try {
                const signInResponse = await firebase.auth().signInWithPopup(provider);
                const credential = signInResponse.credential as firebase.auth.OAuthCredential;
                this.accessToken = credential.accessToken as string;
                this.displayName = signInResponse.user?.displayName as string;
                this.photoUrl = signInResponse.user?.photoURL as string;
                this.emailAddress = signInResponse.user?.email as string;
                router.push("/");
            } catch (error) {
                console.error(error);
            }
        },
        async signOut() {
            try {
                await firebase.auth().signOut();
                this.accessToken = "";
                this.displayName = "";
                this.photoUrl = "";
                this.emailAddress = "";
                router.push("/signin")
            } catch (error) {
                console.error(error);
            }
        }
    }
});

Really nothing rocket science there.
Still, the type returned by useStorage is of type Ref<Authentication.UserProfile> but on vscode, intellisense tells me that the state parameter passed to getters is of type any and in actions, this is of type Ref<Authentication.UserProfile>.

I would actually expect to make calls in actions such as this.value.accessToken = ... but if I do so, it just doesn't work... I get an error saying value is undefined.

The only way for me to actually get no errors is to set the return type of the useStorage function as unknown and then casting it to as Authentication.UserProfile this way:

export const useAuthenticationStore = defineStore({
    id: "authentication",
    state() {
        return (useStorage<Authentication.UserProfile>(
            "user",
            { accessToken: "", displayName: "", photoUrl: "", emailAddress: "" },
            localStorage) as unknown) as Authentication.UserProfile;
    },
    getters: {
        isAuthenticated: (state) => state.accessToken !== "",
        getToken: (state) => state.accessToken
    },

Then, I see no more intellisense typescript errors.
However, the type of the state.accessToken argument passed to getters is still set to any

I'm using Vue 3.0.5, Pinia 2.0.0.alpha16 , typescript 4.2.4 and vitejs 2.2.4

[posva]

The state should return a plain object (it can be a reactive object as well). It cannot be a Ref. So maybe do:

state() {
        return {
           user: useStorage<Authentication.UserProfile>(
            "user",
            { accessToken: "", displayName: "", photoUrl: "", emailAddress: "" },
            localStorage);
  }
    },

The problem is that from a typing perspective, it will think the type of this.user is a ref while in practice it isn't. I think we could unwrap refs automatically in pinia types

[philippedasilva-orizone]

@posva I'm using unref() as seen in my previous post and it's working fine for me with no type errors. Should I still go for as MyType anyway?

[posva]

Yes, because unref will break the reactivity

[philippedasilva-orizone]

I will then until I (or we) get this implemented automatically in pinia ;)
I guess, I'll have to live with this annoying type error in vs code for the time being...

It's not like if the code wasn't running after all :p

[posva]

the error tells you what to do to remove it: as unknown as MyType

[philippedasilva-orizone]

Yes and forgive being new to typescript (while pretty familiar with strongly typed languages such as C++ or C#) but it feels weird having to cast some variable to unknown and then to the actual type it is supposed to have... Isn't it? or is it just me? :)