Topics

SolidJS•3mo ago

How to create a wrapper for SolidJS's setStore in TypeScript?

I have a SolidJS store defined:

const [store, setStore] = createStore<SomeComplexType>();

const [store, setStore] = createStore<SomeComplexType>();

I need to run some code before every execution of setStore, so I would like to wrap it with my own function. Is there a way to do that, that preserves all types and all overloads? So far, the best solution I've (heard)[https://stackoverflow.com/questions/78209469/how-to-create-a-wrapper-for-solidjss-setstore-in-typescript?noredirect=1#comment137881170_78209469] is:

// @ts-expect-error
const setStoreWithEffect: SetStoreFunction<Foo> = (...params: [any]) => {
    console.log("setStore invoked with parameters:", params);
    return setStore(...params);
};

// @ts-expect-error
const setStoreWithEffect: SetStoreFunction<Foo> = (...params: [any]) => {
    console.log("setStore invoked with parameters:", params);
    return setStore(...params);
};

But the error suppression makes it ugly. Is there any clean way to do this?

Stack Overflow

How to create a wrapper for SolidJS's setStore in TypeScript?

I have a SolidJS store defined: const [store, setStore] = createStore<SomeComplexType>(); I need to run some code before every execution of setStore, so I would like to wrap it with my own

5 Replies

Maciek50322•3mo ago

You can directly get type of anything in ts with typeof. If you define your wrapper with same type as setStore is, then the arguments and return value get automatically typed

const setStoreWithEffect: typeof setStore = (...params) => setStore(...params)

const setStoreWithEffect: typeof setStore = (...params) => setStore(...params)

Alex Lohr•3mo ago

That does not work, because of type inference not being able to figure out if the generic is the same in both cases. I've tried for my storage primitive makePersisted(signalOrStore).

Peter•3mo ago

it gives an error:

A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556)

Maciek50322•3mo ago

Oh so that's weird. Also I see that it's fine with

const setStoreWithEffect: typeof setStore = (...params: any[]) => {
  return setStore(params[0], params[1], params[2]);
}

const setStoreWithEffect: typeof setStore = (...params: any[]) => {
  return setStore(params[0], params[1], params[2]);
}

But it's not what we want. And I always treated spread operator as shorthand for this on variable number of arguments. I guess ts won't cover this case. For now if you just don't want these errors without // @ts-expect-error, you can also do

const setStoreWithEffect: typeof setStore = (...params: any[]) => {
  return (setStore as any)(...params);
}

const setStoreWithEffect: typeof setStore = (...params: any[]) => {
  return (setStore as any)(...params);
}

I think it's fine to use as any internally in function as long as you know what you are doing and with properly set arguments / return value types, which typeof setStore takes care of.

Peter•3mo ago

that's better than @ts-expect-error. Thank you!

Solid is a declarative reactive Javascript library for creating user interfaces.

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

submit form without reloadingHello! I have come across a few situations where I want to use the `actions` but don't want it to tr setStore with partial applicationHello, I've recently started using `createStore` a bit and have a question (coming from a functional Set cookie from a resourceIf I'm using a createResource function that is calling an api which is returning a set-cookie header Trouble creating an Ory based loginHey there, I'm triing to build a Login with ory and solid start but I'm really getting trouble doing how do you usually convert a form field from string to number on rpc servershould i use valibot tohelps pls when changing a dynamic variable that contains json <For> will not be re-renderedI have a variable createsignal and it contains json and during actions on the page it receives data HMR briefly updates before reverting in docker container.I'm trying to setup a devcontainer but I'm having one really weird issue. When I make a change the a Hmr doesn't work with custom portEverything works fine when I use default hmr settings. But it stops working when I configure the por Mutate data for optimistic updates with createAsyncWhen using createResource you can use the mutate() function to update the value directly for optimis I've shot myself in the foot again.Help. I don't know what signal is causing which effect or why they are triggered thrice on each chan