has no initializer and is not definitely assigned in the cons- Elite Corner

In this article we will see solution for error “Property has no initializer and is not definitely assigned in the constructor“. We will see there are multiple ways to get rid of this error “Property has no initializer and is not definitely assigned in the constructor“.

If you are using latest version of typescript or if you are using any framework like Angular and React and if you just created new project from Angular or React or just upgraded it to latest version. You might see this error “Property has no initializer and is not definitely assigned in the constructor“.

It occurs when you declare class variable without assigning value to it.

If you are using latest angular and if you have component which declare some variable without initializing value like shown in below snippet, then it will throw that error.

For example.


import { Component } from "@angular/core";  

interface User {
  firstName: string;
  lastName: string;
}

@Component({    
    selector: 'app-user',  
    templateUrl: 'user.component.html'  
}) 
export class UserComponent implements OnInit {
   user:User;
   
   constructor(){ 
   }

   ngOnInit(){  
   }

}

In the above class we have declared user variable but didn’t assign(initialize) value.

That’s the cause of error that we have declared ‘user’ variable but didn’t assign any value to it.

If you will compile the above code, it will throw the error: “Property has no initializer and is not definitely assigned in the constructor” as shown in below image

This error occurs because of Strict Class Initialization which was introduces in Typescript version 2.7.

Now let’s see how to fix “Property has no initializer..” error.

This error can be fixed by following ways:

Initializing Property
Assignment in the Constructor
Disable strictPropertyInitialization flag
Adding undefined type to the property
non-null assertion operator

Table of Contents

Solution 1 : Initialize Property

The first easy and straight forward solution is to assign initial value to the variable.

You can assign value as shown in below snippet.


import { Component } from "@angular/core";  

interface User {
  firstName: string;
  lastName: string;
}

@Component({    
    selector: 'app-user',  
    templateUrl: 'user.component.html'  
}) 
export class UserComponent implements OnInit {
   user:User = { firstName:"", lastName:""};
   
   constructor(){ 
   }

   ngOnInit(){  
   }

}

But if we have existing project and we got this error by upgrading then it will be annoying to initialize all variables in entire project you can looks for other solutions.

Solution 2: Assignment in the Constructor

You can assign the value inside constructor as shown in below snippet.


import { Component } from "@angular/core";  

interface User {
  firstName: string;
  lastName: string;
}

@Component({    
    selector: 'app-user',  
    templateUrl: 'user.component.html'  
}) 
export class UserComponent implements OnInit {
   user:User ;
   
   constructor(){ 
      user = { firstName:"", lastName:""};
   }

   ngOnInit(){  
   }

}

Solution 3: Disable strictPropertyInitialization flag

You can disable strictPropertyInitialization flag by setting it to false in tsconfig.json

"compilerOptions": {
  ///
   strictPropertyInitialization: false
}

Because when strictPropertyInitialization is set to true, the compiler will checks if each property declared inside a class or angular component if you are using angular will check if variable initialized or not.

Solution 4 : Adding undefined type to the property

We can declare undefined type as shown in below snippet


import { Component } from "@angular/core";  

interface User {
  firstName: string;
  lastName: string;
}

@Component({    
    selector: 'app-user',  
    templateUrl: 'user.component.html'  
}) 
export class UserComponent implements OnInit {
   user : User | undefined;
   
   constructor(){ 
   }

   ngOnInit(){  
   }

}

We just need to be careful where we use user property. we need to check if user is undefined or not just to avoid run time error.

Solution 5: non-null assertion operator

By defining non-null assertion operator, we are telling TS compiler that the value of variable is not null or undefined.

If you don’t want to provide initial values for the fields and want to get rid of the error, you can use the non-null assertion operator.

We can define variable as non-null assertion operator by adding Exclamation mark(!) symbol after variable name like I shown in below snippet.


import { Component } from "@angular/core";  

interface User {
  firstName: string;
  lastName: string;
}

@Component({    
    selector: 'app-user',  
    templateUrl: 'user.component.html'  
}) 
export class UserComponent implements OnInit {
   user! : User ;
   
   constructor(){ 
   }

   ngOnInit(){  
   }

}

Use this only when you are sure that you are going to assign value to it later some time

Be sure that we are just bypassing the compiler error, so it’s our responsibility to make sure the property is assigned before using it. otherwise we will get error at run time.

Conclusion:

The best solution to fix error “Property has no initializer and is not definitely assigned in the constructor” is either provide initial value to class variable or mark that property to optional or just set strictPropertyInitialization: false in tsconfig.json which will apply to whole project.