Vue Prop has no initializer and is not definitely assigned in the constructor

Question

I am using props in Vue Class components. The props are defined in the constructor without a value. This compiles and works fine, but since the latest VS Code / TSLint update, I get the following warning:

Property 'tag' has no initializer and is not definitely assigned in the constructor.

Vue Class Component

export default class Browser extends Vue {
  @Prop({default: '', required:false})
  tag: string

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

If I DO assign it, I get the Vue warning that you shouldn't manipulate a Prop in a child component.

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

Since this seems primarily a linting problem, is there a way to disable this? Or is my code actually wrong?

Answer 1

I had the same issue. I fixed it by adding "strictPropertyInitialization": false, to tsconfig.json's compilerOptions.

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "strictPropertyInitialization": false,
        "lib": [
            "es5",
            "es2015",
            "dom",
            "ScriptHost"
        ]
    },
    "include": [
        "./src/**/*"
    ]
}

Answer 2

You don't need set strictPropertyInitialization": false to solve this.

According to this link in Microsoft TypeScript-Vue-Starter repo:

Properties are defined by prefixing instance variables with the @Prop() decorator from the vue-property-decorator package. Because the --strictPropertyInitialization option is on, we need to tell TypeScript that Vue will initialize our properties by appending a ! to them. This tells TypeScript "hey, relax, someone else is going to assign this property a value."

You just need to append the ! to the prop name:

@Prop({default: '', required:false})
  tag!: string