Type conflict, how to increase weight

[jiangmaniu]

Describe the bug

After I download the template, I execute the ni command to install the relevant dependencies of the template After installation, add the following code to <script> of App.vue

<script setup lang="ts">
// Mock ref variables returned from hooks utility functions
const refDataA = ref(1)
const refDataB = ref(2)
setInterval(() => { refDataA.value++; refDataB.value *= 2 }, 1000)

// use in business
const $refDataA = $(refDataA)
const $refDataB = $(refDataB)

// Simulate the `use` tool function like hooks
function useAdd(...params: Ref<number>[]) {
  return computed(() => params.reduce((acc, param) => { return acc + param.value }, 0))
}

// Need to `use xxx as unknown as number` assertion
// Otherwise it will be treated as JQuery<Ref<number>> type
const afterComputed = useAdd($$($refDataA as unknown as number), $$($refDataB as unknown as number))

// continuous output
watch(afterComputed, () => console.log(afterComputed.value))
</script>

When using $() to convert Ref to reactive variables, the type of $() is overwritten by the type of jquery in cypress

I was looking at tsconfig.ts and found that the type of cypress package was excluded and only included in tsconfig.ts inside the /cypress folder, but this doesn't seem to work, in vue vscode in the file still recognizes the type of cypress package, I don't know what's going on here.

I tried uninstalling the cypress package to test if the conflict was really caused by the cypress package, which turned out to be correct.

While the solution works, I need to use the cypress package in my project to test my project, so I can't live without it.

I try to use xxx as unknown as number to assert the transformed variable before using it, it works, but if I need to assert every time I use it, it will increase the burden on my coding mind, I am eager Solve the conflict problem once and for all from a global perspective.

What should I do please?

Reproduction

https://github.com/jiangmaniu/vitesse-type-conflict-repo

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K      
    Memory: 16.64 GB / 31.78 GB
  Binaries:
    Node: 16.15.1 - D:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (103.0.1264.77)
    Internet Explorer: 11.0.19041.1

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[kylegl]

Did you ever solve this? I am getting the same issue.

[NamesMT]

+1, another workaround is adding import { $ } from 'vue/macros' everywhere you need it, that corrects the typing but kinda defeats the whole auto-import feature.