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.

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

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

Closed
bgoscinski opened this issue Sep 11, 2024 · 1 comment · Fixed by #2771
Closed

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

bgoscinski opened this issue Sep 11, 2024 · 1 comment · Fixed by #2771
Labels
bug Something isn't working typescript This issue is related to typings

Comments

@bgoscinski
Copy link
Contributor

bgoscinski commented Sep 11, 2024

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 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
Contributor 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.

@posva posva added bug Something isn't working typescript This issue is related to typings labels Sep 26, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Triaging in Pinia Roadmap Sep 26, 2024
@posva posva moved this from 🆕 Triaging to 🧑‍💻 In progress in Pinia Roadmap Sep 26, 2024
@posva posva closed this as completed in 5ad1765 Sep 26, 2024
@github-project-automation github-project-automation bot moved this from 🧑‍💻 In progress to ✅ Done in Pinia Roadmap Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working typescript This issue is related to typings
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

2 participants