键入'字符串 | null' 不可分配给类型 'string |字符串 []' [重复]答案

【问题标题】：Type 'string | null' is not assignable to type 'string | string[]' [duplicate]键入'字符串 | null' 不可分配给类型 'string |字符串 []' [重复]
【发布时间】：2021-07-13 03:20:41
【问题描述】：

在 Angular-12 中，我在令牌服务中有这个：

get(){
  return localStorage.getItem('token');
}

然后我尝试从另一个服务中将其用于 CORS：

httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": 'application/json',
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Origin, Authorization, Content-Type, Accept",
    "Authorization" : this.token.get()
  })
};

//GET Method
public getAll(): Observable<any> {
  return this.http.get(this.api.baseURL + 'list', this.httpOptions);
}

我收到了这个错误：

键入'字符串 | null' 不可分配给类型 'string |字符串[]'

和：

“授权”

突出显示。

即使我将 httpOptions 更改为：

httpOptions = {
  headers: new HttpHeaders({
  'Authorization' : this.token.get(),
  'X-Requested-With' : 'XMLHttpRequest'
  })
};

发生同样的错误。

我该如何解决这个问题？

【问题讨论】：

请注意，Access-Control-* 标头是 Response 标头，必须由浏览器从服务器接收。将它们作为请求标头从浏览器发送到接收器是没有意义的。

标签： angular typescript

【解决方案1】：

试试看

如果 localStorage.getItem('token') 返回 null，此代码返回 [] 所以 get() 函数返回字符串 | []

get(){
  return localStorage.getItem('token') ?? [];
}

或如果 localStorage.getItem('token') 返回 null，则此代码返回 "" 所以 get() 函数返回字符串 |字符串

get(){
  return localStorage.getItem('token') ?? "";
}

或

这个解决方案不好，但有时会消除编译错误

get(): any{
  return localStorage.getItem('token');
}

【讨论】：

请解释它的作用以及为什么它可以解决 OP 问题。
最后一个选项也不应该是解决方案。键入 any 会破坏 Typescript 的目的。

【解决方案2】：

错误很明显：this.token.get() 返回string | null 而HttpHeaders 需要string | string[] 类型的值。

您需要处理本地存储中没有令牌的可能性：get() 返回的null 值。

根据您的处理方式，您可以在 get() 方法中或在构建 httpOptions 时进行。

【讨论】：

那么...这是否与您发布的问题重复？
@Gaël J - 在本地存储中，令牌就在那里。它看起来是这样的：token Bearer dsddsdsdsdsdsdsdsdsdsdsdsdsdsdsds
有，但也可能不存在。这就是类型所告诉的。如果你确定总是有一个值，你可以忽略 null 但总是更好地处理它。