输入"json" |未定义，"json"不满足在Angular HttpClient中 [英] Type "json" | undefined not satisfied by "json" in Angular HttpClient

问题描述

我正在仔细审查HttpClient 的文档，重点是<一个href ="https://angular.io/api/common/http/HttpClient#get" rel ="nofollow noreferrer"> get(...) 方法.我准备了以下示例:

I'm scrutinizing the docs for HttpClient, focusing on the get(...) method. I've prepared the following sample:

const headers: HttpHeaders = new HttpHeaders();
const observe: HttpObserve = null;
const params: HttpParams = new HttpParams();
const reportProgress = false;
const responseType = "json";
const withCredentials = true;

const options = {
  headers, observe, params,
  reportProgress, responseType, withCredentials
};

this.http.get(url, options)

出现以下错误提示

No overload matches this call.  
The last overload gave the following error.  
Argument of type '{ responseType: string; ... }'  
is not assignable to parameter of type '{ responseType?: "json" | undefined; ... }'.  
Types of property 'responseType' are incompatible.
Type 'string' is not assignable to type '"json" | undefined'.

很明显，所报告的问题是什么.但是，我看不到我键入的内容如何验证所需的内容.如果我键入undefined作为responseType的值，则编译器将得到满足.实际上，详细的代码示例(数字7、8和12至15)明确声明了它是要使用的语法.

It's pretty obvious what's the reported issue. However, I don't see how what I typed is in validation towards what is required. If I type undefined as the value for responseType, the compiler is satisfied. In fact, the elaborated code samples (number 7, 8 and 12 through 15) explicitly state that it's the syntax to be used.

我的"json"怎么不是必需的"json"?

推荐答案

HttpClient方法使用 字符串文字类型 的某些选项-而不是仅仅声明例如responseType作为通用string，它们提供了可以使用的特定值.那么，为什么options对象 不能满足类型定义，因为它具有可接受的值之一?

The HttpClient methods use string literal types for some of the options - rather than just declaring e.g. responseType as the generic string they provide the specific values it can take. So why does your options object not meet the type definition, given it has one of the accepted values?

初始声明:

const responseType = "json";

将responseType定义为字符串文字类型"json";这是一个const，它只能具有该单个值.到目前为止，一切都很好.但是， object 声明:

defines responseType as the string literal type "json"; it's a const, it can only ever have that single value. So far, so good. However, the object declaration:

const options = { responseType /* etc. */ };

赋予options类型{ responseType: string }，它扩大属性的类型.这样做是因为对象是可变的，因此您可以更改值.

gives options the type { responseType: string }, it widens the type of the attribute. It does this because objects are mutable, so you could change the value.

要解决此问题，您有几种选择.排名不分先后

To fix this, you have several options; in no particular order:

• 内联对象创建:

• Inline the object creation:

 this.http.get(url, { responseType });

这不会扩大类型，因为您不能为不持有引用的对象分配其他值.

This doesn't widen the type, because you can't assign a different value into an object you don't hold a reference to.

明确键入中间对象:

 const options: { responseType: "json" } = { ... };

使用 对象上的const断言:

Use a const assertion on the object:

 const options = { responseType } as const;  // or = <const>{...};

这告诉编译器您不会更改值，并将options的类型指定为{ readonly responseType: "json" }.

This tells the compiler you aren't going to change the values and gives options the type { readonly responseType: "json" }.

在字符串上使用const断言(由这有点奇怪，因为responseType的类型仍然是"json"，就像原来一样.但是，这会创建一个"const上下文" ，其中该类型为 non-widening ，因此生成的options类型为{ responseType: "json" }(不是如上，但您只能为其分配一个值.

This one's a bit weird, because the type of responseType is still "json", as it was originally. However this creates a "const context" in which that type is non-widening, so the resulting type of options is { responseType: "json" } (not readonly as above, but you can only assign that one value to it).

下面是示出用于的各种选项的游乐场: TypeScript游乐场.

这篇关于输入"json" |未定义，"json"不满足在Angular HttpClient中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！