How to type snapshots?

[skokenes]

Hi, I am using valtio with TypeScript. I set up a proxy state with some nested type, like

const state = proxy<{ a: TypeA }>({ a: {} });

When I consume the state as a snapshot using useSnapshot in my components, I want to pass snapshot.a to functions that are expecting the type TypeA. However, I am getting TS errors because snapshot.a is now typed as a readonly variant of my TypeA.

Is there some sort of utility type I can use to resolve this issue? I tried modifying my functions to expect a type like ReadOnly<TypeA>, but that still did not match snapshot.a's type.

[dai-shi]

A snapshot is readonly, and if you want to loosen (lie) the type, please assert it.

const snap = useSnapshot(state) as typeof state

This was controversial. Please see #327 for more context.

[lmaero]

Just did the change, it feels more intuitive to type things as Snapshot; excellent, thank you.

By any chance do you have any docs about -beta version? Just discovered this library, learning a lot!

[dai-shi]

We have a small migration guide in the v5 branch.

[jaens]

as typeof state does not work except in trivial cases, so I still think another solution is required.

eg.:

interface State {
  errors: string[];
}

const state = proxy<State>({errors: []});
// Fails with type error due to not allowing casts between `readonly string[]` and `string[]`
const snapshot = useSnapshot(state) as typeof state;

(this is with tsconfig.json » "strict": true)

The alternative useSnapshot(state) as unknown as typeof state; works, but since it's basically not safe at all, it's best left inside a wrapper function.

The wrapper function does not need the unknown cast though, since TypeScript strict cast checking does not work for generics...

export function useSnapshot_cast<T extends object>(state: T): T {
    return useSnapshot(state) as T;
}

[dai-shi]

as unknown as seems a good workaround. removing readonly is not very safe in the first place.

btw, I'm curious why it requires unknown.
This seems to work:

type X =  { readonly arr: readonly number[] }

const x: X = { arr: [] }
const y = x as { arr: number[] }

https://tsplay.dev/mLdA2m

[jaens]

Right, it does actually work... 🤦 Unfortunately I simplified the example for the discussion, it was originally more complicated, should've saved the exact configuration that caused it.