Is there a way to use Store within Data component with proper typing?

[LukeCSYello]

Hi,

I am using Alpine with typescript support.

I have encountered a situation where I would like to use a store to manage, for instance, notifications globally on the app.

I would then like whichever components to have access to this. However, the issue is that I cannot find any nice way to get Typescript support when using my store within a component without casting each time I want to access some property or method of the object in the store.

I'll use a simplified example of a 'notifications' store, with a list of strings representing notifications, and a method to add a new notification. E.g:

notifications: string[] = [],
add(message: string): void { ... }
...
}```

If I want to use a method multiple times within a component, like adding notifications, I find that I am having to type cast each time. For instance:
`;(this.$store.notificationStore as NotificationStore).add('a new notification')`

For a one-off this might be okay, but when I am adding 30 notifications in a component, then the repetitive type casting becomes redundant and verbose.

Is there a preferred way to do this?

Thanks.

[ekwoka]

You can make a magic for it. That's what we did in production for toasts.

Alpine.store('notifications', {
  notifications: [],
  add(thing) {
    this.notifications.push(thing)
  }
})

Alpine.magic('notify', () => (message) => Alpine.store('notifications').add(message))

For example.

then you can do

<button @click="$notify('Oh no')">

and

this.$notify('Oh yeah!')

[LukeCSYello]

Thank you for the answer!

I have noticed that whilst this works, I get a TS error saying: "Property '$notify' does not exist on type 'InferInterceptors & XDataContext & Magics'." (and thus I lose TS intellisense etc)

[ekwoka]

You can, with the newer types do

declare module "alpinejs" {
    interface Magics<T> {
        $notify: whateverthetypeis;
    }
}

this is the designed in way to type magics, just like doing the same with Stores