How do I correctly use a custom property added to my Pinia stores in Typescript?

Question

I am using Vue 3 with Pinia; I have an api service that is used to make requests to my api, I've added it as a property to make it available across all my stores, like so:

main.ts:

import { http } from "@/services/http";

const store = createPinia();
store.use(({ store }) => {
  store.http = http
})

Everything seems to work, I can access the api service within my store and use it to fetch data, however typescript complains that the http property does not exist.

stores/system.ts:

export const useSystemStore = defineStore("system", {
  state: () => ({
    data: <SystemResponse>{
      ...
    }
  }),
  actions: {
    connect() {
      this.http.get("system")  // <-- Property 'http' does not exist on type '{ connect(...
        .then((response) => {
       ...
       ...

How can I fix this and make typescript aware of it?

I searched through Pinia's documentation but unfortunately I couldn't find what I needed to solve the issue.

Answer 1

As documentation says, you need to define your new property on PiniaCustomProperties interface.

In your example you should create a file pinia.d.ts and place module declaration there:

import 'pinia';

declare module 'pinia' {
  export interface PiniaCustomProperties {
    http: YourHttpTypeGoesHere;
  }
}

After that manipulations TS errors should be gone