Skip to content

shallowReactive with v-for incorrect typing: property does not exist on type trueΒ #14490

@clemdee

Description

@clemdee

Vue version

@ea24576

Link to minimal reproduction

https://play.vuejs.org/#eNp9kcFOwzAQRH9l5UtAKqkqOFVppRb1AAdAhaMvabptXBLbsjehUpR/Z+2IUCHUWzyz47zxdmJlbdo2KOYi84VTlsAjNXYptaqtcQQd+DKvKvO1xbwg1SL0cHCmhoRjidRSF0Z7ArM7weLv7E0nNUA+51tIUYVzSFYJ9JOg7i7V9aD2t1Jn0wGEEfhAWNsqJ+QTQFbOoL07GLeQQrEDSof/SrHsOghCGu+Dvs+m5Ywj2XTMi4kgz6gHdUxP3mhuHOGkKExtVYXu1ZLiKlIwWHCCF9s8R41cgxE8ZkosPv/RT/4cNCneHHp0LUoxepS7I9Jgb95f8Mzfo1mbfVPx9BVzi95UTWAcxtaN3jP2xVykfYp7U/r44TdnQu1/SgXQMDk8vxS8v8cr1X9x79OHmOP9iP4buAa6hQ==

Steps to reproduce

shallowReactive object gets incorrectly typed when used in v-for:

<script setup>
import { shallowReactive } from 'vue'

const obj = shallowReactive({
  a: { title: 'A' },
  b: { title: 'B' },
})
</script>

<template>
  <h1 v-for="item in obj">{{ item.title }}</h1>
  <!--                            ^^^^^
  -->
</template>

What is expected?

No error, and

typeof item // { title: string }

What is actually happening?

Typescript error:

Property 'title' does not exist on type 'true | { title: string; } | { title: string; }'.
  Property 'title' does not exist on type 'true' .ts(2339)

System Info

Any additional comments?

I found these typings in vue, I guess it might come from here

declare const ShallowReactiveMarker: unique symbol;
export type ShallowReactive<T> = T & {
    [ShallowReactiveMarker]?: true;
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions