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

Generic Type Issue #12220

Open
lacherogwu opened this issue Oct 19, 2024 · 0 comments
Open

Generic Type Issue #12220

lacherogwu opened this issue Oct 19, 2024 · 0 comments

Comments

@lacherogwu
Copy link

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

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

No branches or pull requests

2 participants