Skip to content

Generic Type Issue #12220

@lacherogwu

Description

@lacherogwu

Vue version

3.5

Link to minimal reproduction

https://play.vuejs.org/#eNp9UtuO0zAQ/ZWRX7JIpRUgXkK24qI+LBKwgi4vdYWqZFq8JLZlO6GrKv/OsZNetMA+JXPmzOV4zkG8s3batSxyUfjSKRvIc2jtXGrVWOMCHcjxlnraOtNQBmp2Sn0wjR3x6SwGsVP2RmqpS6N9oObhk6m4puvY42p1kJoo8D7klMVPNqFuU7eMMH3RuV8/i+XFbFgGayAI3Nh6ExgRUZGmds+b2PlainGGFJQrED2g1eE4xZuGKcIXo84Y9WuUvW1theZ5avg9ktBCinmRJGFmMbtYQExE8FC3VbvpvTcaD5dkSVGCrWp2X2xQUC9FTikTc5u6Nr8/Jiy4lidHvPzJ5a9/4Pd+HzEpbh17dh1LccqFjdtxGNKLb58h9CIJEW0N9hPJr+xN3cYdB9r7VldY+4KXtr1JN1Z6t/SLfWDtj6LiopHZJ74UuHl8qP9JP6/7avo61eHKeMWjXx47j+qN3uECAW1ox5qdKhEuCVpYV55ucI0J3Z3iJW4VbcL7ZMrwYDlx4LoLw/ngoAXepKMRBgTLnP1qnbEedRVvlebbGBWH5BWf03K1pn5+BX+O5h6tPZCTCYu71ToxpB7QRaMCWsSp2V82y3Jajb1Rt8YmY+1T7q9Ul37w62sTaDbAswF/bNUfHbt4ODwyXn/64qXo/wAhdFTy

Steps to reproduce

create a custom component with a generic T, defineModel and defineEmits like the code below

<script setup lang="ts" generic="T extends Item, U extends T">

export type Item = {
  text: string;
  value: string
}

const props = defineProps<{ items: T[] }>()
const model = defineModel<U[]>()

defineEmits<{
  'update:modelValue': [items: U[]]
}>()

</script>

<template>
  <div>
    <slot />
  </div>
</template>

and from you parent component use this

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue';

const myModel = ref([{
  text: 'text', value: 'value'
}])

</script>

<template>
  <Comp v-model="myModel" :items="[{ text: 'some item', value: 'some item' }]" @update:modelValue=""></Comp>
</template>

and if I hover the @update:modelValue I get unknown args instead of T
CleanShot 2024-10-19 at 18 49 34

What is expected?

I should see the type of T when hover on @update:modelValue

What is actually happening?

I found out this this happens only on vue 3.5, when using 3.4 it works well

3.5

CleanShot 2024-10-19 at 18 51 42

3.4

CleanShot 2024-10-19 at 18 53 09

I also noticed that this happens only for @update:modelValue, for example if I have @update:modelAnythingElse in vue 3.5 it works just fine
CleanShot 2024-10-19 at 18 57 09

and I also noticed that only if I call the defineEmits() in the child component this happens
if I don't call the defineEmits() the types are correct on the default @update:modelValue

System Info

System:
    OS: macOS 14.6.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 167.28 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.0.6 - /opt/homebrew/bin/pnpm
    Watchman: 2024.10.14.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 127.1.68.128
    Chrome: 130.0.6723.58
    Safari: 17.6

Any additional comments?

No response

Activity

jacksongross

jacksongross commented on Dec 5, 2024

@jacksongross

I am seeing the same, even without generics. The workaround I found so far is to define the emits with the regular type-based syntax as per the docs, so in your case would be:

defineEmits<{
  (e: 'update:modelValue': items: U[]): void;
}>()

It would be good if we could have the types inferred correctly with the succinct syntax.

KazariEX

KazariEX commented on Dec 9, 2024

@KazariEX
Member

It is not necessary to use both defineEmits to specify the update event for modelValue, as it is automatically generated.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @edison1105@jacksongross@lacherogwu@KazariEX

        Issue actions

          Generic Type Issue · Issue #12220 · vuejs/core