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. ☹️
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]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?
valuesassignment has error (visible in Playground link as well):The crux is that
shallowReactive<T>returns typeT & { [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
Tanymore (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.reactivebrands its return type with a similarReactiveMarkerSymbol(unless it's an array?!) so I imagine it can have similar issues.System Info
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.