search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.48k stars 8.3k forks source link

Discrepancy of expose/defineExpose TS types (and functionality) across different Vue modes #10978

Open ibrahimBeladi opened 5 months ago

ibrahimBeladi commented 5 months ago

Vue version

3.4.21

Link to minimal reproduction

https://github.com/ibrahimBeladi/vue-expose

Steps to reproduce

Clone and test.

There are 3~4 modes of writing in vue in regards to expose, however they generate different types in typescript. In this repo, there are 4 parent and 4 child components, one pair for each writing mode.

  1. Script setup
  2. Setup function
  3. Options API
  4. Composition API with Options API's expose

In each pair, I am having 4 refs in each child component, named ref1, ref2, ref3 and ref4. With ref1 and ref2 being used in template, and returned (if applicable). Also, in the child ref2 and ref4 are being exposed. In the parent component, there is (TS) code trying to reach these 4 refs, however, there are different TS types on each pair of parent/child. In the first case it is reflected correctly, but in the other cases it is not. In the second case and fourth case, expose is not respected (in TS), and the types are reflecting the return not expose. And in the third case, it is not taken into consideration at all (in TS), and hence every ref is reflected. image

Also, there is a different functional (non-TS) behavior in the last case, if it is not valid, you can simply discard it. image

What is expected?

Consistency in TS types.

What is actually happening?

Inconsistent types are generated with different modes of Vue.

System Info

System:
    OS: Linux 6.9 Linux Mint 21.3 (Virginia)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 4.43 GB / 11.45 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
    pnpm: 9.1.1 - ~/.nvm/versions/node/v18.14.0/bin/pnpm
  Browsers:
    Brave Browser: 123.1.64.122
    Chrome: 125.0.6422.60

Any additional comments?

Npm:

ibrahimBeladi commented 5 months ago

I am not sure if the first part is for the core repo or https://github.com/vuejs/language-tools, if it is not for the core repo, please let me know and I will create a different issue there

For the second issue, if it is not valid, you can discard that

If both are invalid, I will close this issue and create one in https://github.com/vuejs/language-tools