Angular property decorators throwing "Property 'x' has no initializer..." error in latest VSCode

Check your tsconfig.json file and ensure strictPropertyInitialization is false.

See "Strict Class Initialization" section of this document for more information: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Note: If you have

"strict": true,

set in your tsconfig.json file, it now will automatically set this new strict property and cause you to see all of these notifications.

So you can change it to:

"strict": true,
"strictPropertyInitialization": false,

As of TypeScript 2.7 the answer is to use Definite Assignment Assertions

Angular Syntax

export class HeroChildComponent {
    @Input('master') masterName!: string;

AngularJS + TypeScript Syntax

export class HeroChildComponent {
    public masterName!: string;

This allows for specific properties to be marked as 'Yeah I am declaring this will be here so leave it alone'. This way you can opt-out in the cases you know to be true and the default behavior of checking for initialization is still on by default.

However... at the time of this comment 2/26/2018 Webstorm and potentially other IDE's do not accept it as valid syntax so the only way to get around it is to turn off "strictPropertyInitialization" in the tsConfig.

Webstorm 2018 EAP 181.3741 says it includes the needed updates to support Definite Assignment Assertions

Judging by this thread I think latest VSCode does support Definite Assignment Assertions

solution 1:

make an initializer

name: string;
constructor() {
    this.name = '';
}

solution 2:

make the property optional

name?: string;
or
name: string|undefined;

solution 3:

Solution by @DeborahK. Do it in tsconfig.json

"strict": true,
"strictPropertyInitialization": false,