Using an object from state that could be null

[jasonlewis]

Hi, just after an idea on how best to achieve this.

I want to store the logged in user as state within a store. So I have a simple app store.

interface User {
  id: number
  firstName: string
}

interface AppState {
  user: User | null
}

export const useAppStore = defineStore('app', {
  state: (): AppState => ({
    user: null
  }),

  getters: {
    authenticated: ({ user }) => user !== null
  },

  actions: {
    async login (email: string, password: string) {
      this.user = await http.post('login', { email, password })
    }
  }
})

On a template that expects a user to be logged in I want to display the users name.

<template>
  <span>Hello {{ user.firstName }}</span>
</template>

<script lang="ts" setup>
import { useAppStore } from '../store/app'
import { storeToRefs } from 'pinia'

const { user } = storeToRefs(useAppStore())
</script>

Now, this works, but I get the following TS warning within the template:

Object is possibly 'null'.

Which makes sense, since I have said that it could be null, however in this case I know that it won't be. I've seen that I could use user!.firstName, however I'm not sure if that's the right solution here. What other approach could I take here?

Cheers.

[BenShelton]

There shouldn't be anything wrong with this. This is the reason the ! operator exists, to quote from https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-

Just like other type assertions, this doesn’t change the runtime behavior of your code, so it’s important to only use ! when you know that the value can’t be null or undefined.

We use the SomeInterface | null type a lot in our stores, it works fine to use the ! postfix operator in some cases.

In other cases where we cannot be sure that it exists (or want something a bit more bulletproof) we do something like:

<!-- Use a ternary -->
<template>
  <span>Hello {{ user ? user.firstName : '' }}</span>
</template>

<!-- Use type narrowing within the template -->
<template>
  <span v-if="user">Hello {{ user.firstName }}</span>
  <span v-else>Not Logged In</span>
</template>

<!-- Use the ! postfix in the script instead -->
<!-- (in some cases using the ! postfix in templates isn't supported depending on your tooling) -->
<script>
const appStore = useAppStore()
const user = computed(() => appStore.user!)
</script>

[jasonlewis]

Awesome, I figured as much, good to know it's the right way to go about it. Cheers for the other solutions as well.

[sockenklaus]

In addition to Ben's answer your could use the nullish coalescing operator in your code like so:

<template>
    <span>Hello {{ user.firstName ?? 'anonymous' }}</span>
</template>

[Atomic71]

This will fail if user is null or undefined (null.firstName, undefined.firstName).

should be: user?.firstName || 'anonymous'