Typing ref() with a class with private methods gives typescript error when passed as argument to another function
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
TS version: v4.1.5 IDE: VSCode Extensions: Volar, Typescript Vue Plugin
To reproduce, copy/paste this code inside a .vue file:
// Test.vue
<script setup lang="ts">
import { ref } from 'vue';
class CustomClass
{
x: number = 0;
private customFunc()
{
// private method
}
}
let customArray = ref<CustomClass[]>([]);
function testFunc(arr: CustomClass[])
{
console.log(arr);
}
testFunc(customArray.value);
</script>
The last line of that code snippet will give a Typescript error saying:
Argument of type '{ x: number; }[]' is not assignable to parameter of type 'CustomClass[]'.
Property 'customFunc' is missing in type '{ x: number; }' but required in type 'CustomClass'.
What is expected?
I would expect to be able to pass an array of CustomClass objects to the function without my IDE showing a Typescript error
What is actually happening?
My IDE is showing a Typescript error and says "customFunc" is missing from the expected type
System Info
System:
OS: macOS 13.1
CPU: (8) arm64 Apple M1
Memory: 61.08 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.1 - /usr/local/bin/node
Yarn: 1.22.19 - ~/homebrew/bin/yarn
npm: 8.15.0 - ~/homebrew/bin/npm
Watchman: 2022.10.24.00 - /Users/ccmetz/homebrew/bin/watchman
Browsers:
Chrome: 107.0.5304.87
Firefox: 105.0.1
Safari: 16.2
Any additional comments?
No response
You can try using type assertions, like this testFunc(customArray.value as CustomClass[]);
@code-ManL appreciate the comment! I know that type casting will make the error go away but was mostly curious if this is something that can be addressed in a future version of Vue. After doing some more digging, I stumbled across #2981 and it appears that it would be pretty difficult.
Duplicate of https://github.com/vuejs/core/issues/2981