Theo's Typesafe Cult•8mo ago

i need help on type

Solution:

```typescript export function StoreSetter<T extends keyof StoreType>({ store, data, }: {...

Jump to solution

29 Replies

erik.gh•8mo ago

bro what

DGCP3•8mo ago

i want to add type to data prop in StoreSetter component

erik.gh•8mo ago

and what’s the issue?

DGCP3•8mo ago

should i send screen shot or copy paste the error

erik.gh•8mo ago

both is fine

DGCP3•8mo ago

ok i did this few min ago and

export function StoreSetter<T extends keyof StoreType, K extends StoreType[keyof StoreType]["init"]>({
  store,
  data,
}: {
  store: T;
  data: K;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(data);

  return null;
}

export function StoreSetter<T extends keyof StoreType, K extends StoreType[keyof StoreType]["init"]>({
  store,
  data,
}: {
  store: T;
  data: K;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(data);

  return null;
}

DGCP3•8mo ago

then this error is shown at top of setAtom(data)

Solution

erik.gh•8mo ago

export function StoreSetter<T extends keyof StoreType>({
  store,
  data,
}: {
  store: T;
  data: ExtractAtomArgs<StoreType[T]>;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(...data);

  return null;
}

export function StoreSetter<T extends keyof StoreType>({
  store,
  data,
}: {
  store: T;
  data: ExtractAtomArgs<StoreType[T]>;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(...data);

  return null;
}

erik.gh•8mo ago

with StoreSetter({store: 'write2', data: [""]})

DGCP3•8mo ago

i have another request if you dont mind

erik.gh•8mo ago

sure go ahead

DGCP3•8mo ago

its ok, to set setAtom(...data) like that right, when I use useeffect it throws a hydration error because initially, it render empty form then get populated

erik.gh•8mo ago

btw not sure if you really want to pass the parameters as object you could also do this:

export function StoreSetter<T extends keyof StoreType>(
  store: T,
  ...data: ExtractAtomArgs<StoreType[T]>
) {
  const [, setAtom] = useAtom(stores[store]);
  setAtom(...data);
  return null;
}

export function StoreSetter<T extends keyof StoreType>(
  store: T,
  ...data: ExtractAtomArgs<StoreType[T]>
) {
  const [, setAtom] = useAtom(stores[store]);
  setAtom(...data);
  return null;
}

and use it like this:

StoreSetter("write2", "jsdlfj", "second", "third", ...)

StoreSetter("write2", "jsdlfj", "second", "third", ...)

which i find to be nicer

DGCP3•8mo ago

erik.gh•8mo ago

so you want to use it as a component?

Gaming

Programming

i need help on type