Search code examples
javascripttypescriptvue.jspinia

Initialize Pinia store with a type


Disclaimer: I am an JS beginner

I am synchronizing an object with pinia store and a python REST API. I Want to declare a type only once and not have to mirror it in the store.

export const useTicketStore = defineStore('ticket', {
  state: () => ({
    id: null,
    status: "",
    subject: "",
    email: "",
    department: null,
    ticketType: nulll,
  }),
  actions: {
    save() {
      const action = this.id ? axios.patch : axios.post
      const url = this.id ? `/api/tickets/${this.id}` : "/api/tickets"
      action(url, this).then((response) => {
        this.$patch(response.data)
      })
    }
  }
})

Throughout my app I use an type declaration for consistancy:

interface Ticket {
    id: number | null,
    status: string,
    subject: string,
    email: string,
    department: number | null,
    ticketType: number | null,
}

What I would like to do is something like this

export const useTicketStore = defineStore('ticket', {
  state: () => ({
    ...Ticket
  }),
  actions: {
...
})

using the example above results in an strange error:

Uncaught SyntaxError: The requested module '/src/types/ticket.ts' does not provide an export named 'Ticket'


Solution

  • The error you are encoutring tells that the file from where you try to import Ticket does not have a default export so if you didn't define a default export you have to import this way:

    import {Ticket} from '...'; // with curly brackets
    

    about what you want to achieve, the function is returning an object (key-value), it may be of type Ticket but you cannot replace it with Ticket because Ticket is a type, not an object.
    you still can define a return type for the function, but this will not avoid specifying the values of the returned object:

    state: (): Ticket => ({
      id: null,
      status: "",
      subject: "",
      email: "",
      department: null,
      ticketType: null,
    })