How can I utilize Pinia and TypeScript to set the State using an Action?

Question

How can I utilize Pinia and TypeScript to set the State using an Action?

I have a Pinia + TypeScript store named user.ts with the following structure:

import { User } from 'firebase/auth';
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () =>
    ({
      displayName: null,
      email: null,
      emailVerified: null,
      isAnonymous: null,
      metadata: null,
      multiFactor: null,
      phoneNumber: null,
      photoURL: null,
      providerData: null,
      providerId: null,
      refreshToken: null,
      tenantId: null,
      uid: null,
    } as unknown as User),
  actions: {
    setPhotoURL(photoURLData: string | null) {
      this.photoURL = photoURLData; //<-- ERROR HERE
    },
  },
});

The state object represents a FireBase User.

I'm trying to update the photoURL value using the setPhotoURL() action.

However, I encountered a TypeScript error related to the readonly property of photoURL:

Cannot assign to 'photoURL' because it is a read-only property. ts(2540)

Can anyone help me understand what I'm doing wrong?

Is this the correct approach for updating state in this setup?

typescript vue.js

Answer 1

Answer №1

To eliminate the readonly modifier, you can achieve this by mapping the type :

Mapping Modifiers

When mapping types, there are two extra modifiers that come into play: readonly and ?, influencing mutability and optionality.

You have the ability to add or remove these modifiers using a prefix of either - or +. If no prefix is added, then + is assumed.
// Eliminates 'readonly' attributes from a type's properties
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};

If your type features nested properties that need to be made writable, recursive mapping is required:

type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> }

Subsequently, apply it when typing the store's user property:

import type { User } from 'firebase/auth'
import { defineStore } from 'pinia'

type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> }

export const useUserStore = defineStore('user', {
  state: () => ({ user: {} as CreateMutable<User> }),

  actions: {
    setPhotoURL(photoURLData: string | null) {
      this.user.photoURL = photoURLData
    },
  },
})

Answer 2

To eliminate the readonly modifier, you can achieve this by mapping the type :

Mapping Modifiers

When mapping types, there are two extra modifiers that come into play: readonly and ?, influencing mutability and optionality.

You have the ability to add or remove these modifiers using a prefix of either - or +. If no prefix is added, then + is assumed.
// Eliminates 'readonly' attributes from a type's properties
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};

If your type features nested properties that need to be made writable, recursive mapping is required:

type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> }

Subsequently, apply it when typing the store's user property:

import type { User } from 'firebase/auth'
import { defineStore } from 'pinia'

type CreateMutable<T> = { -readonly [P in keyof T]: CreateMutable<T[P]> }

export const useUserStore = defineStore('user', {
  state: () => ({ user: {} as CreateMutable<User> }),

  actions: {
    setPhotoURL(photoURLData: string | null) {
      this.user.photoURL = photoURLData
    },
  },
})

Answer 3

Answer №2

'firebase/auth' defines the User interface with readonly properties. When you forcefully assign this interface to your state object, TypeScript believes you.

By spreading it, you can remove the readonly from its properties while still maintaining type inference:

export const useUserStore = defineStore('user', {
  state: () => ({ ...({
    displayName: null,
    email: null,
    emailVerified: null,
    isAnonymous: null,
    metadata: null,
    multiFactor: null,
    phoneNumber: null,
    photoURL: null,
    providerData: null,
    providerId: null,
    refreshToken: null,
    tenantId: null,
    uid: null,
  } as unknown as User) }),
  actions: {
    //...
  }
})

Answer 4

'firebase/auth' defines the User interface with readonly properties. When you forcefully assign this interface to your state object, TypeScript believes you.

By spreading it, you can remove the readonly from its properties while still maintaining type inference:

export const useUserStore = defineStore('user', {
  state: () => ({ ...({
    displayName: null,
    email: null,
    emailVerified: null,
    isAnonymous: null,
    metadata: null,
    multiFactor: null,
    phoneNumber: null,
    photoURL: null,
    providerData: null,
    providerId: null,
    refreshToken: null,
    tenantId: null,
    uid: null,
  } as unknown as User) }),
  actions: {
    //...
  }
})

How can I utilize Pinia and TypeScript to set the State using an Action?

Answer №1

Mapping Modifiers

Answer №2

Similar questions

What methods can I use to combine existing types and create a brand new one?

Enhancing Readability of Public Static Member Variables in Typescript

Troubleshooting: Vue.js component events not being detected in TypeScript

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

Creating a loading screen in Angular 4: Insert an item into the HTML and then set it to disappear automatically after

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

Tips for dynamically adding events to a tag within a custom grid component

Tips for showcasing saved images in Spring Boot with Angular 4

Transforming API Response into a structured format to showcase a well-organized list

Angular 4/5 | Custom Dropdown Component

Angular loop using an HTTP GET request is producing garbled information

Creating a web application using Aframe and NextJs with typescript without the use of tags

Coverage of code in Angular2 using Qunit

Obtaining a value from an input field in Vue.js

Rendering content on the server side and creating a cached version of the index.html file using Vuejs and Nodejs

Resolving TypeScript errors when using the Mongoose $push method

What is the best way to delete markers from a leaflet map?

The specified 'detail' property cannot be found on the given type '{}'. Error code: 2339

Tips for using $apply and $digest in Angular 4 and IONIC 3?

Identifying the [ob: Observer] in Vue: A Beginner's Guide

How can I utilize Pinia and TypeScript to set the State using an Action?

Answer №1

Mapping Modifiers

Answer №2

Similar questions

What methods can I use to combine existing types and create a brand new one?

Enhancing Readability of Public Static Member Variables in Typescript

Troubleshooting: Vue.js component events not being detected in TypeScript

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

Creating a loading screen in Angular 4: Insert an item into the HTML and then set it to disappear automatically after

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

Tips for dynamically adding events to a tag within a custom grid component

Tips for showcasing saved images in Spring Boot with Angular 4

Transforming API Response into a structured format to showcase a well-organized list

Angular 4/5 | Custom Dropdown Component

Angular loop using an HTTP GET request is producing garbled information

Creating a web application using Aframe and NextJs with typescript without the use of tags

Coverage of code in Angular2 using Qunit

Obtaining a value from an input field in Vue.js

Rendering content on the server side and creating a cached version of the index.html file using Vuejs and Nodejs

Resolving TypeScript errors when using the Mongoose $push method

What is the best way to delete markers from a leaflet map?

The specified 'detail' property cannot be found on the given type '{}'. Error code: 2339

Tips for using $apply and $digest in Angular 4 and IONIC 3?

Identifying the [__ob__: Observer] in Vue: A Beginner's Guide

Identifying the [ob: Observer] in Vue: A Beginner's Guide