Pseudotronics Posts - Answer Overflow

Pseudotronics

•Created by Pseudotronics on 6/26/2024 in #support

setStore TypeScript Issue

I have a object store that has an interface like this:

export interface config {
  object1?: type1;
  object2?: type2;
  name?: string;
  ...
  id?: number;
}

export interface config {
  object1?: type1;
  object2?: type2;
  name?: string;
  ...
  id?: number;
}

type1 looks like this:

export interface type1 {
  channel?: number;
  role?: string;
  value?: number;
  present?: boolean;
}

export interface type1 {
  channel?: number;
  role?: string;
  value?: number;
  present?: boolean;
}

type2 looks like this:

export interface type2 {
  channel?: number;
  role?: string;
  value?: number;
  invert?: boolean;
}

export interface type2 {
  channel?: number;
  role?: string;
  value?: number;
  invert?: boolean;
}

Now I have a components where I pass in the following props struct

 {id: Part<config, keyof config>, setConfig: SetStoreFunction<config>}

 {id: Part<config, keyof config>, setConfig: SetStoreFunction<config>}

Within the component I make calls like:

props.setConfig(props.id, "role", "example")

props.setConfig(props.id, "role", "example")

(where props.id = "object1" or "object2") These do not create any typescript error. When I make a call like this:

props.setConfig(props.id, "invert", "example")

props.setConfig(props.id, "invert", "example")

(where props.id = "object2") I get an error like this:

Argument of type '"invert"' is not assignable to parameter of type 'Part<type1| type2, "channel" | "role" | "value">

Argument of type '"invert"' is not assignable to parameter of type 'Part<type1| type2, "channel" | "role" | "value">

The code runs fine without error, so I feel like I am not actually using setStore incorrectly. Why doesn't TypeScript recognize "invert" as valid Part in this situation? Is there any way I can fix this without supressing the TypeScript error?

15 replies

SSolidJS

•Created by Pseudotronics on 4/19/2024 in #support

How to make a reactive copy of a store.

I have an application where I am modifying the configuration for a device. The configuration is maintained in a store and provided via context to the app. What I want to do is make a copy of part of the store (the portion that represents the configuration) of the device and use it as the reactive source for a configuration page. The idea here being I want to copy the current configuration and then let the user modify the copy via reactive controls before applying the configuration to the device via a save button. Here is what I have tried to do:

export const ConfigPage: Component<{device: Device}> = (props) => {
  const config = props.device.config; 
  const [configCopy, setConfigCopy] = createStore<Config>(config);
  ...
}

export const ConfigPage: Component<{device: Device}> = (props) => {
  const config = props.device.config; 
  const [configCopy, setConfigCopy] = createStore<Config>(config);
  ...
}

My intention was to intentionally break the reactivity through prop drilling, however that doesn't seem to work. When I modify the copy it also modifies the original. Has anyone ever done something similar to what I am trying to do? Any help or ideas would be very much appreciated.

4 replies

Gaming

Programming