The generic component does not work properly when using both kebab-case props and inline function props at the same time.

zhuddan

Jun 8th 2023

Vue version

3.3.4

Link to minimal reproduction

Steps to reproduce

Clone this repository with git and open the project with VSCode. The list type in the slot cannot be correctly inferred when using both kebab-case props and inline function props at the same time.. The type of the user should be the generic R not the generic T.

What is expected?

The User type should have an 'isAdult' property after being formatted by the formatter function.

What is actually happening?

The type of the user should be the generic R({ isAdult: boolean; name: string; age: number; }) not the generic T（UseModel）.

  <CompKebabCase1
      v-slot="{ list }"
      :data-fetch="getUserList"
      :formater="user => ({
        ...user,
        isAdult: user.age >= 18,
      })"
    >
      <li v-for="(user, index) in list" :key="index">
        <!-- Property 'isAdult' does not exist on type 'UserModel'.ts(2339) -->
        name: {{ user.name }} == age: {{ user.age }} == isAdult: {{ user.isAdult }}
      </li>
    </CompKebabCase1>

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 7.19 GB / 15.73 GB
  Binaries:
    Node: 16.19.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - D:\Program Files\nodejs\yarn.CMD
    npm: 8.19.3 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (114.0.1823.41), ChromiumDev (115.0.1880.3)
    Internet Explorer: 11.0.22621.1

Any additional comments?

This only occurs when I use both kebab-case props and inline function props simultaneously. It does not happen when I use camelCase props, single-word properties, or when passing in functions.

ghiscoding

Jun 16th 2023

I have the same problem with Vue Transition, the issue starts after upgrading to 3.3.0 and higher, 3.2.47 is unaffected by this issue. Vue 3.3.0 brings better support with Volar and TypeScript, so I would guess it's probably related. The issue is only for kebab case which we decided to use in our project

GitHub Track