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

[yuu2lee4]

@component
export default class Modal extends Vue {
@prop()
title: string;
}
It report this error when using prop decorator

[ali-mansur]

I am also facing the same issue.

Was giving a try to https://github.com/Microsoft/TypeScript-Vue-Starter
Stuck at https://github.com/Microsoft/TypeScript-Vue-Starter#using-decorators-to-define-a-component.

[kaorun343]

@yuu2lee4
@mansur786ali

Hi.

What version of TypeScript are you using?
It seems that this problem is related to this new feature "Strict Class Initialization" of it.

http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

[ali-mansur]

@kaorun343 Mine was 2.2.1, I update to the latest 2.7.1 but still see the issue.

[kaorun343]

Since you use the latest version of TS, you mention the error.
Please see the section "Strict Class Initialization" in the link.

So, you'll need to do like this below.

@Component
export default class Modal extends Vue {
@Prop()
title!: string;
}

[yuu2lee4]

My version is 2.6.2,and add ! solve my problem,but it has some red line

[kaorun343]

@yuu2lee4

Are you using VSCode? Then, you need to change a TS Version that the editor use.
Please check the number that shown in right bottom of the window.

[ali-mansur]

@kaorun343 In my tsconfig I set "strictPropertyInitialization": false.
Now I see TS2508: No base constructor has the specified number of type arguments.

[yuu2lee4]

ok i noticed the number is 2.7.1

[ali-mansur]

@kaorun343 @Hanruis
I see some issue with decorators also
TS1238: Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass<{}>>(target: VC) => VC' is not assignable to type 'typeof HelloDecorator'.
Property 'extend' is missing in type '<VC extends VueClass<{}>>(target: VC) => VC'.

TS2508: No base constructor has the specified number of type arguments.

[Hanruis]

It is possible that use the initial value to be default value of props ?

example:

// source
class MyApp extends Vue{
  @Prop()
  name = ''
}


// equals
props:{
  name:{
    type:String,
    default:''
  }
}

[ali-mansur]

@Hanruis setting initial value doesn't fixes the issue.

[jkehler]

For me the solution was to use the new "definite assignment assertion modifier" from the documentation http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

@Component
export default class MyComponent extends Vue {
  @Prop({ required: true }) title!: string
  @Prop() optionalItem: string|undefined
}

Notice the exclamation mark in the title parameter. I only use this if required is set to true or if there is a default prop. If not then you should use |undefined.

"The definite assignment assertion is a feature that allows a ! to be placed after instance property and variable declarations to relay to TypeScript that a variable is indeed assigned for all intents and purposes, even if TypeScript’s analyses cannot detect so."

[marpstar]

You can simply provide an initial value for those properties:

@Prop() name: string = "";
@Prop() initialEnthusiasm: number = 0;

[foxbot]

I was able to fix this issue by adding a constructor to my component:

import { Vue, Component, Prop } from 'vue-property-decorator';
import Radio from './radio';

@Component
export default class RadioComponent extends Vue {
  @Prop() radio: Radio;

  constructor() {
    super();
  }
}

[Gesh4o]

Hello guys,

I have found this thread in stack overflow. It seems to be an issue with typescript version 2.7.*. A few configuration settings in .tsconfig should do the trick - the accepted answer should provide you more info.

I hope this helps! :)

P.S: It comes from an angular thread so do not hate me about it 😆

[hartmut-co-uk]

correct, see vuejs/vue-cli#834 (comment)

[liquidboy]

I needed to turn this off in tsconfig … broke all my @angular ts files

[ps2goat]

@Gesh4o that worked for me. with 2.6.2, but upgrading to 2.7.2 still shows an error when the file is open. Note that the build still works and no problems are found when the file is closed.

I forget that ALL VS Code instances have to be closed for it to take effect... 2.7.2 works for me, using the latest FEB 2018 VS Code update.

[dreambo8563]

still reproduce in ts 2.8.1

[martinbean]

Props need to have an exclamation mark appended, i.e. title!: string.

From https://github.com/Microsoft/TypeScript-Vue-Starter#using-decorators-to-define-a-component:

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."

[barakbd-bluevine]

If I don't use constructor, then I have to define state in the store as optional or with an initial value:
Property 'user' has no initializer and is not definitely assigned in the constructor.ts(2564)

Setting a default value or forcing a definite value with an exclamation mark(!) defeats the purpose of Typescript and adds more code. Now, every method that returns a state or data or prop has to return the interface of that variable | undefined.

Without a constructor, class basically becomes an interface.

[barakbd-bluevine]

"State values should never be initialized undefined on purpose. It makes them loose reactivity. Initialize them as null if you want to."

championswimmer/vuex-module-decorators#35

[mateja176]

You may mark the field as optional upon initialization, like so:

import React from 'react';

class MyComponent extends React.Component {
  // * note the '?'
  myField?: any;
}