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?

Leannleanna

Which version of Typescript are you using? – Rarefaction

Gotta believe this is a linting issue, since you do provide a default in the decorator. – Achlorhydria

@Achlorhydria Right but that value's provided at run-time not when tslint can see this. – Bobodioulasso

Answer 1

Update 2020/06/15

My original answer I gave at the time was a intermittent solution and not the correct one. This answer is the correct way of doing this; Appending the prop name with a !.

Original Answer

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/**/*"
    ]
}

Ashby

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

Mischa