'string \| 类型的参数null' 不能分配给“字符串”类型的参数。类型 'null' 不能分配给类型 'string'

Question

我有一个 dotnetcore 20 和 angular4 项目，我正在尝试创建一个 userService 并让用户访问我的主组件。后端工作得很好，但服务却不行。问题出在 localStorage 上。我收到的错误消息是：

‘string | 类型的参数null’ 不能分配给“字符串”类型的参数。类型“null”不能分配给类型“string”。

还有我的用户服务

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 });
    }
}

而我的 home.component.ts 是

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; });
}

错误出现在 JSON.parse(localStorage.getItem('currentUser'));

原文由 GoGo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如错误所说， localStorage.getItem() 可以返回字符串或 null 。 JSON.parse() 需要一个字符串，所以你应该在尝试使用之前测试 localStorage.getItem() 的结果。

例如：

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

也许：

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

另请参阅 Willem De Nys 的回答。如果您确信 localStorage.getItem() 调用永远不会返回 null 您可以使用非空断言运算符告诉打字稿您知道自己在做什么：

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

原文由 Duncan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 Angular 或 TS：-

 JSON.parse(localStorage.getItem('user') as string);

或者

JSON.parse(localStorage.getItem('user') as any);

原文由 Mahmmoud Kinawy 发布，翻译遵循 CC BY-SA 4.0 许可协议