Topics

SolidJS•10mo 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•10mo 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•10mo 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).

PeterOP•10mo ago

it gives an error:

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

Maciek50322•10mo 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.

PeterOP•10mo ago

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

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

12KMembers

View on Discord

Did you find this page helpful?