Skip to content

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

Closed as not planned
@ludwig801

Description

@ludwig801

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:

image

Link to minimal reproduction

https://play.vuejs.org/#eNqNU99r2zAQ/leEnlJIHcrYS+YGutCHDbaVrm9RGKpzTtTJktDJWULw/76THP9YYWnBYPu+T3ff3X068Tvnsn0NfM7zAJXTMsBCGMbyJ8Cw3Cm9YfO91DXcCo47qbX9c+e9PArOZv8lbgDcmJXPRrnpFwuvXGAIoXZMS7OlMwEFJ1RVzvrAhqSltxUTPJul36hV8E8978S+HZdaIrJmxIwBYrHZjOXX122yGMuoyHDSQzll554eoRwydDWEKaxB0jnqm92OjuTn4qv1YrJaX/UFZWLakoWjg07has0mKCtogxJZ2EHUkC+uukL93KhKRF6lj4NsR7fgUxoYHSrVNntBa2h/p7gNwQtbOaXB/3BBUVLB5ywhEUu6v6ZYKTXCtAOKHRS/WyD4eoi/4CHGBH/wgOD3NJceC9JvIbTw/c/vcKDvHqzsptbEvgA+AlpdR5Et7XNtNqR7xEtyv6R1KbN9wvtDAINdV1FoZDaJn7a2vND7IPdD9jGdE6ahMXbGoAnCITmjSH7qfHUSPrKdV3vyb/d+8NbNGQZPwvq1GxtUQfvdycAUPdixzynqZ62K8+ufBBFPWjqLx+v49iW5aP5o3w2UyiStmKdBpAs6HxzZS6fWoQj4Tuc+Ay2GXNssJq9d+WsPPq6IOqA5Zzc3vPkLvgN7ng==

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood reproduction ✨This issue provides a good reproduction, we will be able to investigate it firstupstream: core

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions