Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect types for setup stores that contain ShallowRef<{ bar: Ref<...> }> #2770

Open
bgoscinski opened this issue Sep 11, 2024 · 1 comment · May be fixed by #2771
Open

Incorrect types for setup stores that contain ShallowRef<{ bar: Ref<...> }> #2770

bgoscinski opened this issue Sep 11, 2024 · 1 comment · May be fixed by #2771

Comments

@bgoscinski
Copy link

bgoscinski commented Sep 11, 2024 •
edited
Loading

Reproduction

https://play.pinia.vuejs.org/#eNqtVFFv2jAQ/itWXqAS2KvoOgkBYpv6sD1sVdvHaFKID+IusS3bSekQ/31nJ4FAKWLSIkDO3Xf3fXe+YxN91ppWJUTjaGJTI7QjeSJX0zhyNo5msRSFVsaRDeGwFBIenTJAtmRpVEF6WkiR9DogmyV5rl4eYDkgxv8Ii+cdHokQHctUSetIaZt0027yfs+Bdb0B6V+R6YxsYkkwlSuNJP0NWSo17rCgZZGYsefq9xbJn94V2fpPLP13wuqSsAx8acqzmEsfFVnrsY2YVlcfU7S+BO3uVYNa1jCKQihSt/7FO35aJXkJsWSMnHt++Yc8PZJUFTpPhLRkUToiUFSmypzLnmuZ0rNMNAe5ctn/JORIGK6xf8D3pr8OfCYH+EbIhItqdu/HI4i1JBdAXJb4/O3lWZJgv0v5YhKtgQcBCDCldKLwaHj1CJRCMpApeLlgjDJ2wnz6wKMNzE61g0ynUxJHmw1e3XYbRxPmkWdD6g7uAxf/Fti0fh+fnoo/1cl9CD8ImbBOT6NBVK/ZsEg0fbZK4s6G7YgbB87yuN4Xbwu76S1xxMKZgi2GC6NeLBiMj6NBC53jXjIOlVMqt8NEizosc07bMWMpl4jnkIvKUAmOSV2wNzHzW3pLr1kuFgyJmJAc1oc0GDHkUFySvYXOP9DrG/opZK1GTdLiOOulcpvJGnJVzEf0I73BMbKua36/Rz4ejRWYIY4kBwPmUtqjsC71kesNvWff4p8ZXr6zuI5LsTq6er+/IgfzUzuB63owAmHRvgebMyXsakkzSH+fsD/bdV3TvYGgrFO/S8wKXO2+e/wBazzvnIXiZd5cwzvOB7AqL73GGvallBxld3BB7bcwyUKunuzd2oG0bVFeaOhGwIf7+Hqm9L3cER3turj9C5toUtQ=

Steps to reproduce the bug

  1. Create a setup store with value being a shallow ref holding an object, whose property contains a ref
  2. Try to use that store value in TS-enabled component
  3. TS complains despite proper usage

Expected behavior

Pinia types properly stop recursive flattening of the types upon encountering ShallowRef<X> so that

expectType<{ bar: Ref<string> }>(store.foo)
expectType<Ref<string>>(store.foo.bar)
expectType<string>(store.foo.bar.value)

Actual behavior

Pinia, when it produces type of the store variable, doesn't stop recursive ref flattening when it encounters ShallowRef<X> and continues to flatten X recursively producing store type that doesn't match its runtime value

Additional information

This works correctly when using option store API. Proof
@bgoscinski bgoscinski changed the title Incorrect types for stores that consist of ShallowRef<{ foo: Ref<...> }> Incorrect types for stores that consist of ShallowRef<{ bar: Ref<...> }> Sep 11, 2024
@bgoscinski bgoscinski changed the title Incorrect types for stores that consist of ShallowRef<{ bar: Ref<...> }> Incorrect types for setup stores that consist of ShallowRef<{ bar: Ref<...> }> Sep 11, 2024
bgoscinski added a commit to bgoscinski/pinia that referenced this issue Sep 11, 2024
@bgoscinski
fix(types): Don't double UnwrapRef in setup stores
5519b8e 
fixes vuejs#2770
@bgoscinski bgoscinski linked a pull request Sep 11, 2024 that will close this issue
Open
@bgoscinski bgoscinski changed the title Incorrect types for setup stores that consist of ShallowRef<{ bar: Ref<...> }> Incorrect types for setup stores that contain ShallowRef<{ bar: Ref<...> }> Sep 11, 2024
@bgoscinski
Copy link
Author

A workaround is to either
A) use options store instead of setup store
B) lie in TS like so:

const useStore = defineStore('test', () => {
  const foo = shallowRef({ bar: ref('baz') })
  //    ^^^ this is ShallowRef<{ bar: Ref<string> }>
  return { 
    foo: foo as unknown as ShallowRef<typeof foo>
    //                     ^^^^^^^^^^ introduce another layer of ShallowRef
    //                                this makes pinia believe that foo is
    //                                ShallowRef<ShallowRef<{ bar: Ref<string> }>>
  }
})

This works because pinia applies UnwrapRef type to the state twice so when it encounters ShallowRef<ShallowRef<T>> it'll flatten it to T.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(types): Don't double UnwrapRef in setup stores bgoscinski/pinia
1 participant
@bgoscinski