Skip to content

ShallowReactiveMarker related errors with TS 7 #14638

@jods4

Description

@jods4

Vue version

3.5.31

Link to minimal reproduction

https://play.vuejs.org/#eNp9kU9PwzAMxb+KlctAmjbx51RtSIB2gAOgwTGX0nldRppEiVOGqn53nFQbE5p2i/2end+TO3Hv3KSNKAoxC5VXjiAgRQe6NPVcCgpS3EmjGmc9QQdhU2ptv5dYVqRahB7W3jYw4hUjaaSprAm8YnDB/L//ooOygKsxfBZwDf2lNBoJ2lJHDAXQj0O73s+kdYPCe47n+qTMpgMuw3FB2DhdEnI1mx4VYswJmGmt6sk2WMMxO2kApKhs45RG/+pIMbMUBWQlafn759wjH3G871cbrL5O9Ldhl3pSvHkM6FuU4qBR6WukQV68v+CO3wexsauo2X1GXGKwOibGwfYQzYqxj3yZ9ikfSJn6Iyx2hCbsQyXQ5OyzXwo+1OOZ6H+4N5PbPCdNL/pfiVO4ww==

Steps to reproduce

Consider the following Typescript code.
Other patterns are possible to highlight the presence of [ShallowReactiveMarker]

const shallow = shallowReactive({ a: 1, b: 2 })
let values: typeof shallow
values = { a: 1, b: 2}

What is expected?

It used to compile fine but after upgrading to the new TS 6.0.2 and to Vue 3.5.31 I now have a tyoe error.
I'm not sure if the change was on Vue or TS side.

What is actually happening?

values assignment has error (visible in Playground link as well):

Type '{ a: number; b: number; }' is not assignable to type 'ShallowReactive<{ a: number; b: number; }>'.
Property '[ShallowReactiveMarker]' is missing in type '{ a: number; b: number; }' but required in type '{ [ShallowReactiveMarker]: never; }'.
ts(2322)

The crux is that shallowReactive<T> returns type T & { [ShallowReactiveMarker]: never }.
Adding marker symbols like that can easily be a source of issues because then you can't assign to that variable a regular T anymore (or in any position that must be assignment-compatible from the type system perspective).

I don't know why that marker symbol was added. I think reactivity could be considered as a runtime trait of our objects but from a static type perspective they should be considered as just plain T.

reactive brands its return type with a similar ReactiveMarkerSymbol (unless it's an array?!) so I imagine it can have similar issues.

System Info

Check out the SFC playground

Any additional comments?

In some situations, it can be annoying to handle when you don't have a named type at hand.
The marker symbol is not exported, so you can't really create a helper type to remove it from any type T. ☹️

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