Closed as not planned
Closed as not planned
Description
Vue - Official extension or vue-tsc version
3.5.11
VSCode version
1.95.0
Vue version
3.5.11
TypeScript version
5.6.2
System Info
No response
package.json dependencies
No response
Steps to reproduce
Given the following class:
TestClass.ts
export class MyClass { private privateProp: string; // <-- notice that it is private public publicProp: string; }
And the following SFCs:
TestChild.vue
<script setup lang="ts"> import { MyClass } from "@/TestClass"; defineProps<{ value: MyClass[]; // <-- expects array of type MyClass[] (same type as below) }>(); </script>
TestParent.vue
<template> <TestChild :value="shallowArray" /> <TestChild :value="deepArray" /> </template> <script setup lang="ts"> import TestChild from "@/TestChild.vue"; import { MyClass } from "@/TestClass"; // <-- TestClass.ts import { ref, shallowRef } from "vue"; const shallowArray = shallowRef<MyClass[]>([]); // <-- array of type MyClass[] (same type as the ref<>) const deepArray = ref<MyClass[]>([]); </script>
What is expected?
The value of both shallowArray
and deepArray
should not be unwrapped in either cases.
shallowArray
should be of typeshallowRef<MyClass[]>
deepArray
should be of typeref<MyClass>[]
This way, both can be used as valid prop values for TestChild
's [value]
prop.
What is actually happening?
shallowArray
is being correctly interpreted as shallowRef<MyClass[]>
, but deepArray
has its iterable's value unwrapped, so that it becomes ref<{ publicProp: string }[]>
instead of ref<MyClass[]>
, which loses the private property privateProp
from MyClass
.
This causes the following error, because there is a missing property privateProp
for the [value]
prop of TestChild
:
Link to minimal reproduction
Any additional comments?
No response