Just starting out with Angular and struggling to understand how to fix the TS(2322) error

Question

Just starting out with Angular and struggling to understand how to fix the TS(2322) error

Main Code:

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string;
  constructor(){
    const data = localStorage.getItem("todos");
    this.localItem = data;
    if(this.localItem == null){
      this.todos = [];
    }
    else{
      console.log(this.todos);
      this.todos = JSON.parse(data);
    }
  }

Here is the result of my compilation: ERROR src/app/MyComponents/todos/todos.component.ts:14:5 - error TS2322: Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

14 this.localItem = `custom text` item;

I attempted to resolve it by adding, const localItem: string | null = getValueFromSomewhere(); but unfortunately, it did not work as expected

angular typescript visual-studio-code compiler-errors

Answer 1

Answer №1

When retrieving items from the localStorage, there is a possibility of receiving null if the specified key does not exist in the storage. This means that the result of

localStorage.getItem("todos")

could be either a string or null. In this situation, you are assigning it to this.localItem, which will always be treated as a string based on your implementation. To handle this scenario effectively, you can either change the type of this.localItem to string | null, or perform a proper null check on the item before proceeding further. Here's an example of how you can achieve this:

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string;
  constructor(){
    const item = localStorage.getItem("todos");
    if(item == null){
      this.todos = [];
    }
    else{
    this.localItem = item;
      console.log(this.todos);
      this.todos = JSON.parse("localItem");
    }
  }
}

Answer 2

When retrieving items from the localStorage, there is a possibility of receiving null if the specified key does not exist in the storage. This means that the result of

localStorage.getItem("todos")

could be either a string or null. In this situation, you are assigning it to this.localItem, which will always be treated as a string based on your implementation. To handle this scenario effectively, you can either change the type of this.localItem to string | null, or perform a proper null check on the item before proceeding further. Here's an example of how you can achieve this:

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string;
  constructor(){
    const item = localStorage.getItem("todos");
    if(item == null){
      this.todos = [];
    }
    else{
    this.localItem = item;
      console.log(this.todos);
      this.todos = JSON.parse("localItem");
    }
  }
}

Answer 3

Answer №2

Referencing Wortmann's response.

There are various approaches to address your scenario.

Here are a couple of them :

Modifying the type of localItem to string|null.

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string|null;
  constructor(){
    this.localItem = localStorage.getItem("todos");
    if(this.localItem == null){
      this.todos = [];
    }
    else{
        console.log(this.todos);
        this.todos = JSON.parse("localItem");
    }
}
}

Utilizing the ?? operator.

export class TodosComponent implements OnInit{
  todos!: Todo[];
  localItem: string;
  constructor(){
     this.localItem = localStorage.getItem("todos") ?? "";
    if(this.localItem == ""){
       this.todos = [];
    }
    else{
       console.log(this.todos);
       this.todos = JSON.parse("localItem");
    }
}
}

Answer 4

Referencing Wortmann's response.

There are various approaches to address your scenario.

Here are a couple of them :

Modifying the type of localItem to string|null.

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string|null;
  constructor(){
    this.localItem = localStorage.getItem("todos");
    if(this.localItem == null){
      this.todos = [];
    }
    else{
        console.log(this.todos);
        this.todos = JSON.parse("localItem");
    }
}
}

Utilizing the ?? operator.

export class TodosComponent implements OnInit{
  todos!: Todo[];
  localItem: string;
  constructor(){
     this.localItem = localStorage.getItem("todos") ?? "";
    if(this.localItem == ""){
       this.todos = [];
    }
    else{
       console.log(this.todos);
       this.todos = JSON.parse("localItem");
    }
}
}

Just starting out with Angular and struggling to understand how to fix the TS(2322) error

Answer №1

Answer №2

Similar questions

Stripe detects that no signatures match the expected payload

How can you develop a component that is reusable and make sure that the template reference variable can be assigned to the cdkDropList directive?

Having issues with your Typescript in Sublime Text?

How to access a deeply nested object in Angular 2

Steps for running an Angular application in IntelliJ:1. Open IntelliJ IDEA

Unveiling the types of an object's keys in Typescript

Azure DevOps pipeline encounters npm authentication failure

Unable to set textAlign column property in Inovua React Data Grid using typescript

Arranging Angular Cards alphabetically by First Name and Last Name

Updating REST API URL on build in Angular CLI

Zod Entry using standard encryption key

Activating Ionic6 Stack Modal through JavaScript or TypeScript

Tips for boosting ViteJs development mode performance

Exploring Angular: The Dynamic Declaration of object.property in ngModel

Differences between Angular 2's ng build and Webpack buildIn this

How can you check the status of a user in a Guild using Discord JS?

Node.js is raising an error because it cannot locate the specified module, even though the path

How to add a class to an element using an Angular 2+ directive

Angular (2/4) application utilizing custom-named routing within a single page architecture

TSLint warning: Duplicate identifier detected - 'err'