Skip to content

ShallowReactiveMarker related errors with TS 7 #14638

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. ☹️

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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