Typescript union type as state in Pinia

[avalanche-tm]

I'm wondering would it be possible to use Typescript union types such as

type State<T extends string> = { type: T }
type AuthStateLoggingIn = State<'loggingIn'>
type AuthStateLoggedIn = State<'loggedIn'> & { user: User }
type AuthStateError = State<'error'> & { errorMsg: string }
type AuhtStateLoggedOut = State<'loggedOut'>

export type AuthState =
  | AuthStateLoggingIn
  | AuthStateLoggedIn
  | AuthStateError
  | AuhtStateLoggedOut

to model state? So far I was not able to get proper result because getters would return undefined for each property other than shared property type.

const useAuthStore = defineStore({
  id: 'auth',
  state: () => <AuthState>{ type: 'loggedOut' },
  getters: {
    loggingIn: (state) => state.type === 'loggingIn',
    hasError: (state) => state.type === 'error',
    error: (state) => {
      // should return errorMsg but returns undefined
      return state.type === 'error' ? state.errorMsg : ''
    },
  },
  actions: {
    async signIn(email: string, password: string) {
      this.$patch({ type: 'loggingIn' })
      const res = await authRepository.signIn(email, password)

      if (res.error) {
        this.$state = { type: 'error', errorMsg: res.error.message }
      } else {
        this.$patch({
          type: 'loggedIn',
          user: { id: res.data.id, email: res.data.email, name: res.data.name },
        })
      }
    },
  },
})

[Lilja]

May I ask why you are constructing so many different types if aren't using them?

Wouldn't it be better to:

enum States {
     "loggingIn"="loggingIn",
     "loggedIn"="loggedIn",
     "loggedOut"="loggedOut",
     "error"="error",
}
type AuthState = {
    type: States,
    user:  User | null,
    errorMsg: string | null,
}

[avalanche-tm]

I am using them, just not in the short example I gave you. The thing is, some state carry no information but some like Error and LoggedIn do have errorMsg and User data attached to them. There is no point for other states to carry redundant information. The whole point of using union types is to 'protect' myself and other developers working on the project from issuing illegal state. If user is not logged in, User field should not be available at all. Imagine having two or three times more properties on your state object, and always making sure you clear or null all of those that are not needed by the current state you are trying to model. Sooner or later you'll make a mistake. By having union types you always enter only relevant data and have everything else cleared by default.

Example you wrote does nothing better than just having typical state object with all the properties and no type.

[Lilja]

Interesting! Thanks for the context.

Maybe you could add type predicates for your getters?

const stateIsError = (state: AuthState): state is AuthStateError => {
    return typeof (state as Record<string, unknown>).errorMsg !== "undefined";
}
// And define your getter as:
error: (state) => stateIsError(state),

[avalanche-tm]

This unfortunately didn't work. It's basically what I do in getter, but via type property. Type gets recognized correctly but other properties (errorMsg) are undefinded.

error: (state) => {
      // should return errorMsg but returns undefined
      return state.type === 'error' ? state.errorMsg : ''
    },

[Lilja]

It probably can't infer that since the T extends string isn't narrow enough to infer state.type == "error" => state == AuthStateError .

I wonder if you could change your generic. Maybe change it so:

type State = { type: "loggingIn" | "loggedIn" | "error" | "loggedOut" }

Maybe then it can infer it being AuthStateError

[posva]

It is possible to do the way you do but then you will have to always set the whole state with

You can actually use $patch() to change the state in a ts safe way

// or using $patch
this.$patch({ type: 'loggedIn', user: { id: '1' } })

Whole example:

interface User {
  id: string
}
type State<T extends string> = { type: T }
type AuthStateLoggingIn = State<'loggingIn'>
type AuthStateLoggedIn = State<'loggedIn'> & { user: User }
type AuthStateError = State<'error'> & { errorMsg: string }
type AuhtStateLoggedOut = State<'loggedOut'>

export type AuthState =
  | AuthStateLoggingIn
  | AuthStateLoggedIn
  | AuthStateError
  | AuhtStateLoggedOut

import { acceptHMRUpdate, defineStore } from 'pinia'

const delay = (t: number) => new Promise((r) => setTimeout(r, t))

export const useWholeStore = defineStore('whole', {
  state: (): AuthState => ({ type: 'loggedIn', user: { id: '1' } }),

  actions: {
    async login() {
      try {
        await delay(1000)
        this.$patch({ type: 'loggedIn', user: { id: '1' } })
      } catch (e) {
        const error = e as Error
        this.$patch({ type: 'error', errorMsg: error.message })
      }
    },

    logout() {
      this.$patch({ type: 'loggedOut' })
    },
  },
})

Otherwise, you need to do

 state: () => ({ authState: { type: 'loggedOut' } as AuthState }),

[avalanche-tm]

Unfortunately this.$state = newState doesn't do the trick. errorMsg property still stays undefined in getter. It almost seems like properties that are not shared among all types are somehow stripped away. Second suggestion does actually work but comes with expense of extra wrapper over state object which feels a bit unsatisfying

[avalanche-tm]

@posva code you posted is same as mine, and setting state works as expected. The problem is in getters. Getters are unable to access properties of concrete States. I get 'undefined' when trying to get 'errorMsg' from AuthStateError in a getter

    error: (state) => {
      // should return errorMsg but returns undefined
      return state.type === 'error' ? state.errorMsg : ''
    },

[posva]

ah, true! I forgot about the initial version of the code after coming back so many times 😄

I tried it and it worked:

[avalanche-tm]

@posva did you try running the example, I mean can you console.log(state.errorMsg)? I also didn't get any error in compile time, but in runtime state.errorMsg is undefined.

    error: (state) => {
      if(state.type === 'error') console.log(state.errorMsg) // logs 'undefined'
      // should return errorMsg but returns undefined
      return state.type === 'error' ? state.errorMsg : ''
    },

[avalanche-tm]

@posva can you let me know if example you wrote works in runtime?