Typescript Error that with Extending PiniaCustomProperties

[nathanthibert]

I'm having some issues with typing a plugin for Axios for all my stores. The api property in the plugin is considered as "any" and in the actual useUserStore.ts the property is not being found. I'm using vs code as an IDE. I followed all the documentation and still getting errors. Any help would be welcome.

extensions.d.ts

import "pinia";
import { AxiosInstance } from "axios";

declare module "pinia" {
  export interface PiniaCustomProperties {
    api: AxiosInstance;
  }
}

store.ts (the store creation file)

import { createAxiosInstance } from "@/platform/services/axios";
import {createPinia, PiniaPluginContext } from "pinia";

const api = createAxiosInstance();
const pinia = createPinia();

pinia.use(({ store }: PiniaPluginContext) => {
  store.api = api; //<-- HERE TS THINKS API IS 'ANY'
});

export default pinia;

useUserStore.ts

import { User } from "@/types";
import { defineStore } from "pinia";

interface State {
  user: User;
}

export const useUserStore = defineStore("user", {
  state: (): State => ({
    user: null,
  }),
  actions: {
    async getUser(id: string) {
      try {
        this.user = await this.api(...); //<-- HERE TS FAILS
      } catch (error) {
        return error;
      }
    },
  },
});

[nathanthibert]

I know this is very similar to #388, which I followed, though I still get those errors/non-typing.

[BenShelton]

You need to change your declaration file slightly. You can't import from a different module when trying to do declaration merging outside of the declare block. This is common gotcha, you can track reports of it at microsoft/TypeScript#28097.

Try this:

import "pinia";

declare module "pinia" {
  export interface PiniaCustomProperties {
    api: import('axios').AxiosInstance; // use an inline import
  }
}

EDIT: Removed example using import { AxiosInstance } from 'axios' within the declare block as that doesn't work either.

[nathanthibert]

Hey @BenShelton thanks for replying. I have tried the first approach you suggested and received a TS error in the declare of Imports are not permitted in module augmentations. Consider moving them to the enclosing external module.ts(2667). I then tried the second approach, which seemed to work for the d.ts file though I was still having the TS error against the api property. My assumption is the d.ts file isn't getting picked up by vs code (though vs code is coming up with errors).

[nathanthibert]

Even if I make the api as a string (just for testing) I get:

Wondering if it's a tsconfig thing I'm missing. I don't believe so since I have a shims-vue.d.ts for using declareComponent and this seems to work fine. I'm a bit confused on what's going on lol

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

[BenShelton]

Yeh you're right, I don't really understand this declaration merging syntax, I'll remove the first example.

If you run tsc -p tsconfig.json (or whatever your tsconfig is called) and that passes then it may be that it isn't being picked up by VSCode as you suspect. It may be worth reading through microsoft/vscode#12463 in case that affects you, maybe also https://stackoverflow.com/questions/38268776/why-does-typescript-ignore-my-tsconfig-json-inside-visual-studio-code

If it doesn't pass, make sure the extensions.d.ts will be picked up by the include of your tsconfig.

See an example of this working at https://stackblitz.com/edit/github-jpntzy?file=src%2Fstores%2Fcart.ts

[nathanthibert]

Thanks for all the help. I finally got it working with the import within the PiniaCustomProperties and adding the d.ts file to the includes of the tsconfig.json