When using the vuex-class decorator in Vue+typescript, vscode reports an error, but compiles normally!

Don"t talk too much nonsense, above!

< H2 > index.vue can see that userName has a red wavy line! < / H2 >

clipboard.png

clipboard.png

storeuserName

clipboard.png

do you know the cause and solution of the error reported by vscode itself?

Apr.02,2022

has been solved, tell us the cause of this problem and the solution!

Why does

vscode have this error?

is actually incorrect in its own tsconfig.json configuration. After typeScript version 2.7 , a configuration item called -- strictPropertyInitialization was introduced. Officially, it is:

.
make sure that the non-undefined attribute of the class is initialized in the constructor, and for this option to take effect, you need to enable-- strictNullChecks at the same time. The default value is false . For more details, please see strict property initialization

then I looked at my configuration, and there was no such thing. I went on to look through the official configuration document and found that there was something strict that, if enabled, would change strictNullChecks to true . If you know the root of the problem, it will be easy to solve it.

how to solve it?

  1. add "strictPropertyInitialization": false under the compilerOptions node in the tsconfig.json file so that you don't make an error!
  2. if you still want to enable null value checking without reporting an error, you can write @ State username: string; before it! You won't make a mistake, which means tell typeScript it will be worth it and you don't have to worry about it!

A better workaround is to add !

to the attribute.
export default class Browser extends Vue {
  @Prop()
  tag!: string

  created(){
     console.log("the tag prop is " + this.tag)
  }
}
Menu