Regression in slot typings

[darkbasic]

Vue - Official extension or vue-tsc version

2.2.4

VSCode version

1.97.2

Vue version

3.5.13

TypeScript version

5.6.3

System Info

System:
    OS: Linux 6.13 Arch Linux
    CPU: (16) x64 AMD Ryzen 9 PRO 7940HS w/ Radeon 780M Graphics
    Memory: 32.16 GB / 54.70 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 22.14.0 - /run/user/1000/fnm_multishells/5326_1740124809918/bin/node
    Yarn: 4.6.0 - /run/user/1000/fnm_multishells/5326_1740124809918/bin/yarn
    npm: 10.9.2 - /run/user/1000/fnm_multishells/5326_1740124809918/bin/npm
    Watchman: 20240414.112832.0 - /usr/bin/watchman
  Browsers:
    Chromium: 133.0.6943.126

package.json dependencies

Steps to reproduce

Playground:

TabRend errors out at line 87 if you upgrade vue-tsc to 2.2.4 which has just been released.

What is expected?

The slot typings should be valid.

What is actually happening?

src/components/VTable/TabRend.vue:86:12 - error TS2345: Argument of type '{ value: T["key"] extends keyof U ? U[T["key"]] : T["value"] extends keyof U ? U[T["value"]] : T["value"] extends (...args: unknown[]) => unknown ? ReturnType<...> : never; }' is not assignable to parameter of type 'NonNullable<(Readonly<__VLS_Slots> & __VLS_Slots)[T["key"]]> extends (props: infer P) => any ? P : {}'.

86           <slot :name="slotName(tuple, item, index)" :value="getValue(tuple, item, index)">
              ~~~~


Found 1 error.

Link to minimal reproduction

https://play.vuejs.org/#eNrtWM1u20YQfpUJC0QyIEpx2l5YSk4apEAL1DEcuT2IOlDkyqFD7RJc0rGg6t07sz/kSpZk2Q0cFMhFJnf+v5mdGXrlvS2K/m3NvMALX/g+MJlnvPLTTMaznMGbalkwmZRZUfmaNODCr3ktWerfxqUE3x9F/HhRLrjP6zz3YylZWWWCP1ZDzWU8Zz7Rnq6E3RV5lmSVH/OlkdU8IFlVF5DH/HoYeZWMPKRli0KUFYzj2SXjKcxLsYBOf2DeCb5OxCNOluDvMqsYWQ7HIxjCCvySxang+RImF5Bx+MyWYg7jaQDjycUU1iSZCC4rQMPo8BAmEQdY0Q8QdwCdRKRkAmDdu0djnKylHUUBuI3zmgXQXYFMRMlgHQDGeALDkTkYwekeTZUoFMuWqo4+VEIRn0IsQfnbOo4RL2TjOFJTEos7PW0ygFNrztJmLe31Ni1paVQpymgD75gwOo8XTIZjYHcV4i/hbVnGy3Clw5BVmfFr+AeFFzNW4oNcLmYC9YxUQsjWrkxMOvjeQUtobzDAWDzyJ/J6EHkGY/1iYYo8ZNYAcHII1bTOtWVAbqMZlVzlwUSns+ekzsF+K9S/KAcyJKf3xKujuKI4VeS/6Lyd3afgQ7fb7/fj8hqdxaqYTFVdqPpYj1QWriJ+DEqNK8aGLpgzuJo4TBgKnVpB5dY+UVfYMBrx/QraWGr+mYsv3MRj3qw4qb7EW13yMcIabujCy22ZsNrYLSub/GvMejATImcx77X1RFXZpF4psrk32dqT/B50zbu6MCcTrXGqiyKeUeFXZc168DOqDwe6I6GL+IICRR5XTDkc2k4UKMXUqFTrwJu5x3TkQaCMIq/6q/oaha16pgoCMqkhwOv3SdR5CjNmK0e1SMVuHYEfqIpR3cpIrxuVeJebQwRTiQ02AnjQrAF9p11zax4yfQadD7yDae18mM87T/ZkI+s7/bFX94lYhHaO0BBySV4P5w8W2Ty77t9IwXFEq2tJjWlRZDkrPxQ0+zCXgW3kkRfnufjyhzpTtWTPk08s+bzj/Ebe0VnkXZQMh+ktdTxLq/B2sUqT3388x3vnEBcirXPkPkC8ZFLkNfmo2X6teYpuO3zK29/VeMUyG8v3dLWlDYocbWdV5OGgfXcg9NbdH/s/mXG1RhSdOf2oNWfHkvC8W8reZUlzUohqXaEHZ2Oh12vGWZkleKLRuWq65iXDYk1D294wNt353QHzlUeLzh5Olmcd4t/H6Lceo24GPuai+jMuvmUKxnbg0qC8sOjirlyU2MKbRmLWXstwCOhGSYsxHj2QoUZ0O0F7xI/Oz1aGWlVOepwEYX+0oJlszWueqC6Tyd/MY9eejcU7miCNEycBbJFofO5Jioa2VL7dE3sx1LP15UtYrfuV+KhS3E9wNmxbR33DIXQmYnbDkgqsk1P8OFEBpGyecXZB6QyVSbX9UOErkNXmEyD41CBG3ZNWhKoTm5FbqCjTg6uRYWugkUim1vWMhax+zxtTuoixurs2up6KDAPDhwDOMTVuhx1NzqcbCVBik2z6oo/u0F3YUQE4SFXP/B+EaXo7kq/uheoUchu18hKzqm/M1nmXbBhioAxOtkXhzJXCWE8IRBOznj2HlveKJn6zRn7C/w409zOsSueuhlUKt/5clDjFuwluUgv8CsmwYu9OqJ0pF2ixR8vIoRnIHWf5NAuo8ZZETdbtMmoWUseFQeMDPjrehdVMpEvX1dY5gqkHN8ot83lh3brZ8OYrhaRWqDe4z9GOhp3AZ2UpynY7N1x0VyGgj3NUZi+uzqauJWubTKrUIp+t/N18GwYUtof4N2AmQMkJFw4XeR0WInQ/iE2jhyN6parRaQAbH4KTV1O7EjbqDkfu6DM3zVWIX6ztJ+197cfChUYeCdV/hen0MEynj4XJ0fcwTNvaj4UJjTwzTK8Pw/T6sTA5+h6GaVv7sTChkWNgctrFZtdrGh0+m2a9+WW+/hcK2HTx

Any additional comments?

https://stackoverflow.com/questions/79460089/tuple-type-inference-in-vue-js-named-slots-with-typescript/

[KazariEX]

According to my investigation, this issue also exists in v2.2.2.

[KazariEX]

There should be no problem with this function itself.

function __VLS_asFunctionalSlot<S>(slot: S): (props: NonNullable<S> extends (props: infer P) => any ? P : {}) => void;

[KazariEX]

[darkbasic]

According to my investigation, this issue also exists in v2.2.2.

@KazariEX are you sure?

[niko@arch-phoenix portal-ui]$ yarn vue-tsc --build --force
[niko@arch-phoenix portal-ui]$ git diff package.json
diff --git a/package.json b/package.json
index e032aea..bad93f4 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,7 @@
     "vite-plugin-vuetify": "^2.1.0",
     "vitest": "^3.0.6",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.4"
+    "vue-tsc": "2.2.2"
   },
   "nyc": {
     "extension": [
[niko@arch-phoenix portal-ui]$ git checkout package.json; yarn; yarn vue-tsc --build --force
Updated 1 path from the index
➤ YN0000: · Yarn 4.6.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + vue-tsc@npm:2.2.4, @vue/language-core@npm:2.2.4
➤ YN0085: │ - @vue/language-core@npm:2.2.2, vue-tsc@npm:2.2.2
➤ YN0000: └ Completed in 0s 410ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide @babel/core (pa343b), requested by @cypress/code-coverage.
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide @babel/preset-env (p3beda), requested by @cypress/code-coverage.
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide @typescript-eslint/parser (p46ad0), requested by @typescript-eslint/eslint-plugin and other dependencies.
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide babel-loader (p572ea), requested by @cypress/code-coverage.
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide postcss (p363c7), requested by autoprefixer.
➤ YN0002: │ idf-portal-ui@workspace:. doesn't provide webpack (p55d68), requested by @cypress/code-coverage.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 725ms
➤ YN0000: ┌ Link step
➤ YN0008: │ idf-portal-ui@workspace:. must be rebuilt because its dependency tree changed
➤ YN0000: └ Completed in 0s 383ms
➤ YN0000: · Done with warnings in 1s 628ms
src/components/VTable/TabRend.vue:86:12 - error TS2345: Argument of type '{ value: T["key"] extends keyof U ? U[T["key"]] : T["value"] extends keyof U ? U[T["value"]] : T["value"] extends (...args: unknown[]) => unknown ? ReturnType<...> : never; }' is not assignable to parameter of type 'NonNullable<(Readonly<__VLS_Slots> & __VLS_Slots)[T["key"]]> extends (props: infer P) => any ? P : {}'.

86           <slot :name="slotName(tuple, item, index)" :value="getValue(tuple, item, index)">
              ~~~~


Found 1 error.

[KazariEX]

Sorry, but this is because the errors in v2.2.2 were not correctly mapped back into the code.

This is the virtual code in v2.2.2:

[KazariEX]

If the type is correct, you should be able to trigger Go To Definition on :value=.

[darkbasic]

@KazariEX could you please check the same example on 3.0.0-alpha.2? Because it looks like it's fixed now but I'm not 100% sure if it's because the errors are once again not correctly mapped back into the code.

[KazariEX]

No, we did not make any fixes as the error originated from your type definition itself:

<template>
  <tr v-for="(item, j) in items" :key="j">
    <td v-for="(column, index) in tuple" :key="column.key">
        <!-- will trigger error at here -->
        {{ slots[slotName(tuple, item, index)]({ value: getValue(tuple, item, index) }) }}
    </td>
  </tr>
</template>

This is the equivalent code for <slot :name="..." :value="..." />.

The reason why the error is not displayed now is indeed due to incomplete mapping.

[darkbasic]

The reason why the error is not displayed now is indeed due to incomplete mapping.

@KazariEX is there a regression in 2.2.10 in that regard? Because the error disappeared.

[KazariEX]

2.2.10 only picked a few error fixes from 3.0.0. As I provided the code above, you need to solve the type issue yourself.

[darkbasic]

@KazariEX I don't get the error in the code above anymore with 2.2.10, so I guess there isn't anything to solve with the latest stable version of the language tools.