I am trying to write type declarations for a javascript module in typescript. I want to define interfaces using a virtual module (not sure if its the right term for it). I defined base module types without a problem, but when I want to import interfaces from declared virtual module I get an following error because there is no file for it:
[vite] Internal server error: Failed to resolve import
“vuex-shared-mutations/types” from “src/stores/AuthStore.ts”. Does the
file exist?
I am using Vuejs with vite. Here are my type definitions for module:
// src/types/vuex-shared-mutations.d.ts
interface BaseStrategyOptions {
key: string
}
interface BroadcastChannelStrategyOptions implements BaseStrategyOptions {
}
interface LocalStorageStrategyOptions implements BaseStrategyOptions {
maxMessageLength: number
}
interface CreateMutationsSharerParams {
predicate: Array<string> | Function;
strategy?: BroadcastChannelStrategy | LocalStorageStrategy
}
declare module "vuex-shared-mutations" {
function createMutationsSharer(params: CreateMutationsSharerParams);
export = createMutationsSharer
}
// I get error when I try to import this module
declare module "vuex-shared-mutations/types" {
declare class BaseMutationSharingStrategy {
addEventListener(fn: function)
share(data: any)
}
declare class LocalStorageStrategy extends BaseMutationSharingStrategy {
constructor(options: LocalStorageStrategyOptions)
}
declare class BroadcastChannelStrategy extends BaseMutationSharingStrategy {
constructor(options: BroadcastChannelStrategyOptions);
}
export {
BroadcastChannelStrategyOptions,
LocalStorageStrategyOptions,
CreateMutationsSharerParams,
LocalStorageStrategy,
BroadcastChannelStrategy,
};
}
And this is how I am trying to import said module:
// src/stores/AuthStore.ts
import Vuex from 'vuex';
import type { AccessToken } from '@/model/auth';
import createMutationsSharer from "vuex-shared-mutations"; // this line does not cause any issues
import { BroadcastChannelStrategy } from 'vuex-shared-mutations/types'; // this line throws said error
interface AuthStoreData {
accessToken?: AccessToken,
}
const AuthStore = Vuex.createStore({
state(): AuthStoreData {
return {
accessToken: undefined,
}
},
mutations: {
set(state: AuthStoreData, item: AccessToken) {
state.accessToken = item;
return state;
},
reset(state: AuthStoreData) {
state.accessToken = undefined;
return state;
},
},
plugins: [
createMutationsSharer({
predicate: ["set", "reset"],
strategy: new BroadcastChannelStrategy({ key: "auth-store-channel" })
})
]
})
export default AuthStore;
For context, I am trying to define types for vuex-shared-mutations
npm package. How can I solve this issue ? Or should I try a different solution for defining these parameter types ?