Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'

Question

I have a dotnetcore 20 and angular4 project that I am trying to create a userService and get the user to my home component. The backend works just fine but the service doesn't. The problem is on localStorage. The error message that I have is :

Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.

And my userService

import { User } from './../models/users';
import { AppConfig } from './../../app.config';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';



@Injectable()
export class UserService {
constructor(private http: Http, private config: AppConfig) { }

getAll() {
    return this.http.get(this.config.apiUrl + '/users', this.jwt()).map((response: Response) => response.json());
}

getById(_id: string) {
    return this.http.get(this.config.apiUrl + '/users/' + _id, this.jwt()).map((response: Response) => response.json());
}

create(user: User) {
    return this.http.post(this.config.apiUrl + '/users/register', user, this.jwt());
}

update(user: User) {
    return this.http.put(this.config.apiUrl + '/users/' + user.id, user, this.jwt());
}

delete(_id: string) {
    return this.http.delete(this.config.apiUrl + '/users/' + _id, this.jwt());
}

// private helper methods

private jwt() {
    // create authorization header with jwt token
    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser && currentUser.token) {
        let headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
        return new RequestOptions({ headers: headers });
    }
}

And my home.component.ts is

import { UserService } from './../services/user.service';
import { User } from './../models/users';
import { Component, OnInit } from '@angular/core';

@Component({
moduleId: module.id,
templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit {
currentUser: User;
users: User[] = [];

constructor(private userService: UserService) {
   this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}

ngOnInit() {
   this.loadAllUsers();
}

deleteUser(_id: string) {
   this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
}

private loadAllUsers() {
   this.userService.getAll().subscribe(users => { this.users = users; });
}

The error is on JSON.parse(localStorage.getItem('currentUser'));

Answer 1

As the error says, localStorage.getItem() can return either a string or null. JSON.parse() requires a string, so you should test the result of localStorage.getItem() before you try to use it.

For example:

this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');

or perhaps:

const userJson = localStorage.getItem('currentUser');
this.currentUser = userJson !== null ? JSON.parse(userJson) : new User();

See also the answer from Willem De Nys. If you are confident that the localStorage.getItem() call can never return null you can use the non-null assertion operator to tell typescript that you know what you are doing:

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);

Answer 2

the accepted answer is correct, just wants to add a newer and shorter answer.

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);

Answer 3

The non-null assertion operator worked for me very well:

(1). in my case

this.currentUserSource.next(null!)

(2). in your case

this.currentUser = JSON.parse(localStorage.getItem('currentUser')!);

Answer 4

Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

export class TodoComponent implements OnInit {
  
  loacalitems!: string;
  todos!: Todo[];

  constructor() {
    this.loacalitems = localStorage.getItem("todos");
}

because localStorage.getItem() return string or null solve this problem any variable this type error is define variable

localitems!: string | null;

this variable holds to type values string or null. then write logic

Short hande if else

this.todos = this.localitems !== null ? JSON.parse(this.localitems) : [];

if-else

if(this.localitems !== null){
   // item not null code
   this.todos = JSON.parse(this.localitems)
}else{
   // item is null code
   this.todos = []
}

Answer 5

  localsetItem: string | null;
  constructor() { 
  this.localsetItem=localStorage.getItem("todos")
  if(this.localsetItem == null)
  {
    this.todos  = [];
  }
  else
      {
    this.todos=JSON.parse(this.localsetItem);
      }
   }

Answer 6

I have struggled a lot making this issue worked in my case by using the above solution but none of them succeeded. What workied for me is:

   const serializableState: string | any = localStorage.getItem('globalState');
    return serializableState !== null || serializableState === undefined ? JSON.parse(serializableState) : undefined;

I had to cast my variable to string | any and then checked if the variable is null or undefined before parsing it

Answer 7

Try this

private userSubject$ = new BehaviorSubject<User | unknown>(null);

Answer 8

I solved it as below

router.navigateByUrl(returnUrl!);