init data by access props is undefinded

[kagaricyan]

code example:

<template>
  <span>{{ test }}-{{ local }}</span>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop({default: ()=>({aaa: 456})}) msg;

  local = JSON.parse(JSON.stringify(this.msg));

  get test() {
    return this.msg.aaa;
  }
}
</script>

this code is works in lower version. recent days,i want to upgrade my dependencies, but get problems with this code.

[CptMeatball]

I've also run into this issue when updating to the latest versions. It seems to be related with dev-deps, because when we left that untouched, it works just fine. We're still trying to figure this one out and see which dep causes this behavior.

[twrayden]

Just had this issue. Downgrading to TypeScript 4.2.4 fixed it.

[pieterzeilstra]

Does anyone has a workaround for this that does not involve downgrading Typescript? We can't downgrade our typescript version and we haven't found a way to solve this issue.

[kagaricyan]

I decide rewrite all class component using composition api

[farazshuja]

Added in tsconfig.json, now its working fine for me
"useDefineForClassFields": false,

tested on typescript v. 4.7.4

[bchen1029]

Added in tsconfig.json, now its working fine for me "useDefineForClassFields": false,

tested on typescript v. 4.7.4

@farazshuja really appreciate your comment help me fixing my legacy project!
For someone else meet this problem, here is the typescript 4.3 breaking change.

[SarguelUnda]

I'm not sure but it seems that putting the props definition after the data definition also work for me. Can anyone confirm or explain why ? Sorry I'm not typescript fluent.

<template>
  <span>{{ test }}-{{ local }}</span>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

  /* data first */
  local = JSON.parse(JSON.stringify(this.msg));

  @Prop({default: ()=>({aaa: 456})}) msg;

  get test() {
    return this.msg.aaa;
  }
}
</script>