Not compatible with TypeScript 4.3+

[FurryWolfX]

Describe the bug

Not compatible with TypeScript 4.3+

When using TS4.3, there will be a lot of warnings. But 4.2 is correct.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
...

I didn't write any code to modify the properties. Just use @Prop.

Desktop (please complete the following information):

• OS: MacOS 11.4
• Browser Chrome 91
• Version 9.1.2

[andrevmatos]

Mybe a workaround: microsoft/TypeScript#44449 (comment)

[iwt-nduesing]

So the workaround is to add "useDefineForClassFields": false to the tsconfig.json like so:

{
  "compilerOptions": {
    "useDefineForClassFields": false
  },
}

So the result is, that classes are not working in the new ECMA way, but in the old TypeScript way.

[jenglish404]

An alternative tsconfig.json change that solved it for us was to change the target from esnext to es6:

{
  "compilerOptions": {
    "target": "es6"
  }
}

If you don't need the features of esnext (we didn't), then es6 is a good option as modern browsers support all ES6 features.

Specifically, things broke when running locally and targeting esnext when Chrome v97 was released in January 2022. This must have pushed the ES runtime to a point where it breaks vue-property-decorator and you see the warnings (Avoid mutating a prop directly).

Chrome v96 did not have an issue, nor did Firefox.

[TomokiIwaiBiz]

Adding declare makes its field not to be initialized. It works for me.

@Component
export default class MyComponent extends Vue {
    @Prop()
    declare readonly name?: string;
}

[shadow-light]

Chrome v97 broke our app (in dev mode) because of this issue as well.

In the readme it recommends to use @Prop() readonly name!:string to force typescript to assume the value will exist. Instead switching to @Prop() declare readonly name:string as suggested above can be used, assuming there's no downsides?

[ohueter]

So the workaround is to add "useDefineForClassFields": false to the tsconfig.json like so:

{
  "compilerOptions": {
    "useDefineForClassFields": false
  },
}

So the result is, that classes are not working in the new ECMA way, but in the old TypeScript way.

This solved all of the issues & errors we got with our class components when upgrading a vue-cli-based App to Vite and TypeScript 4.9. Thank you!!