feat(types): allow defining custom state properties

diff --git a/src/index.ts b/src/index.ts
index a8da3e30831e4d6905550411517386c8c487de20..f5a9b2c6590e2a2d0a32b9c4bd8e918461aa87ea 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,7 @@ export type {
   StoreOnActionListenerContext,
   SubscriptionCallback,
   PiniaCustomProperties,
+  PiniaCustomStateProperties,
   DefineStoreOptions,
 } from './types'
 export { MutationType } from './types'

diff --git a/src/rootStore.ts b/src/rootStore.ts
index b529e2ff76daea3522a565390a12644f3f8e1786..ae2d91cdc5f9dea1cf3399709b695b8be0af912c 100644 (file)
--- a/src/rootStore.ts
+++ b/src/rootStore.ts
@@ -8,6 +8,7 @@ import {
   Store,
   DefineStoreOptions,
   ActionsTree,
+  PiniaCustomStateProperties,
 } from './types'
 import type Vue from 'vue'
 
@@ -68,7 +69,9 @@ export interface PiniaStorePlugin {
    *
    * @param context - Context
    */
-  (context: PiniaPluginContext): Partial<PiniaCustomProperties> | void
+  (context: PiniaPluginContext): Partial<
+    PiniaCustomProperties & PiniaCustomStateProperties
+  > | void
 }
 
 /**

diff --git a/src/types.ts b/src/types.ts
index 6ba83e9a66271254105231fca5ea83e460d3c9c9..b17239c8acb021cd664e2359a0ca95d9b93d97a8 100644 (file)
--- a/src/types.ts
+++ b/src/types.ts
@@ -198,7 +198,7 @@ export interface StoreWithState<Id extends string, S extends StateTree> {
   /**
    * State of the Store. Setting it will replace the whole state.
    */
-  $state: UnwrapRef<S>
+  $state: UnwrapRef<S> & PiniaCustomStateProperties<S>
 
   /**
    * Private property defining the pinia the store is attached to.
@@ -339,7 +339,8 @@ export type Store<
   UnwrapRef<S> &
   StoreWithGetters<G> &
   StoreWithActions<A> &
-  PiniaCustomProperties<Id, S, G, A>
+  PiniaCustomProperties<Id, S, G, A> &
+  PiniaCustomStateProperties<S>
 
 // TODO: check if it's possible to add = to StoreDefinition and Store and cleanup GenericStore and the other one
 
@@ -381,6 +382,11 @@ export interface PiniaCustomProperties<
   A = ActionsTree
 > {}
 
+/**
+ * Properties that are added to every `store.$state` by `pinia.use()`
+ */
+export interface PiniaCustomStateProperties<S extends StateTree = StateTree> {}
+
 /**
  * Type of an object of Getters that infers the argument
  *
@@ -388,7 +394,7 @@ export interface PiniaCustomProperties<
  */
 export type GettersTree<S extends StateTree> = Record<
   string,
-  ((state: UnwrapRef<S>) => any) | (() => any)
+  ((state: UnwrapRef<S & PiniaCustomStateProperties<S>>) => any) | (() => any)
 >
 
 /**
@@ -418,7 +424,12 @@ export interface DefineStoreOptions<
    * Optional object of getters.
    */
   getters?: G &
-    ThisType<UnwrapRef<S> & StoreWithGetters<G> & PiniaCustomProperties>
+    ThisType<
+      UnwrapRef<S> &
+        StoreWithGetters<G> &
+        PiniaCustomProperties &
+        PiniaCustomStateProperties
+    >
   /**
    * Optional object of actions.
    */
@@ -428,6 +439,7 @@ export interface DefineStoreOptions<
         UnwrapRef<S> &
         StoreWithState<Id, S> &
         StoreWithGetters<G> &
-        PiniaCustomProperties
+        PiniaCustomProperties &
+        PiniaCustomStateProperties
     >
 }

diff --git a/test-dts/customizations.test-d.ts b/test-dts/customizations.test-d.ts
index b9e69874bc861e15ebda75b58cd1da4e6582f72a..30afff13c77f395c50302d08d7177b1a48102397 100644 (file)
--- a/test-dts/customizations.test-d.ts
+++ b/test-dts/customizations.test-d.ts
@@ -9,6 +9,10 @@ declare module '../dist/src' {
     $actions: Array<keyof A>
   }
 
+  export interface PiniaCustomStateProperties<S> {
+    myState: number
+  }
+
   export interface DefineStoreOptions<Id, S, G, A> {
     debounce?: {
       // Record<keyof A, number>
@@ -23,6 +27,9 @@ pinia.use((context) => {
   expectType<string>(context.options.id)
   expectType<string>(context.store.$id)
 
+  expectType<number>(context.store.$state.myState)
+  expectType<number>(context.store.myState)
+
   return {
     $actions: Object.keys(context.options.actions || {}),
   }
@@ -30,10 +37,13 @@ pinia.use((context) => {
 
 const useStore = defineStore({
   id: 'main',
+  state: () => ({}),
   actions: {
     one() {},
     two() {
       this.one()
+      expectType<number>(this.$state.myState)
+      expectType<number>(this.myState)
     },
     three() {
       this.two()
@@ -47,6 +57,8 @@ const useStore = defineStore({
   },
 })
 
+expectType<{ myState: number }>(useStore().$state)
+
 type Procedure = (...args: any[]) => any
 
 function debounce<F extends Procedure>(fn: F, time = 200) {