I've been working on creating type declarations for a Javascript module in Typescript. My goal is to define interfaces using what I believe is a virtual module. Initially, I had no trouble defining the base module types. However, when attempting to import interfaces from the declared virtual module, I encountered the following error due to the absence of a file:
[vite] Internal server error: Failed to resolve import "vuex-shared-mutations/types" from "src/stores/AuthStore.ts". Does the file exist?
My development environment includes Vue.js with Vite. Below are my type definitions for the 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
}
// The module import that causes an error
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,
};
}
Below is how I am trying to import this module:
// src/stores/AuthStore.ts
import Vuex from 'vuex';
import type { AccessToken } from '@/model/auth';
import createMutationsSharer from "vuex-shared-mutations"; // No issues here
import { BroadcastChannelStrategy } from 'vuex-shared-mutations/types'; // This line triggers the 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;
To provide context, my aim is to define types for the vuex-shared-mutations npm package. How can I address this issue? Should I explore alternative solutions for defining these parameter types?