TS: issues with private class properties with ref vs shallowRef for typed arrays

ludwig801 commented 2 hours ago

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 type shallowRef<MyClass[]>
deepArray should be of type ref<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: