Question

我无法理解打字稿中的以下类型。 obj值的示例将非常有帮助。

 obj: { [name: string]: string | string[]; };

我实际上是想了解Angular中HttpClient的post方法中options对象的headers属性的类型：

post(url: string, body: any | null, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    ...
    }

https://angular.io/api/common/http/HttpClient

Answer 1

让我们按照以下Typescript规则逐步将其分解

类型定义之间带有竖线的类型定义称为union type，这意味着它可以是任何定义的类型。

let foo: string | number = 0; // foo must be a string or a number
foo = "a string";

example

返回类型可以是对象。在这种情况下，您可以通过键入密钥名称和类型来定义密钥。

const obj: {
    foo: string,
    bar: number
} = {foo: "a string", bar: 42 }

const err: {
    foo: string,
    bar: number
} = {foo: "a string", bar: "another string" } // this would not work, because we defined bar as a number

example

我们也使用联合类型来定义类型

let obj: {
    foo: string,
    bar: number | string
} = {foo: "a string", bar: "another string" } // this works because bar can be a number OR a string

example

对象键后面的问号表明它是可选的。

const foo: {
    foo?: string
} = {} // is valid

const bar: {
    foo?: string
} = { foo: "a string" } // is also valid

const baz: {
    foo?: string
} = {bar: "a string"} // invalid because bar is no property of type {foo?: string}

example

{[key: string]: string}类型表示允许任何键，只要它可以强制转换为字符串，即可。

const foo: {
    [key: string]: string
} = {foo:"a string", bar: "another string", baz: "yet another string"} // is all valid

在上面的示例中，每个键都是有效的，只要类型是字符串即可。

const bar: {
    [key: string]: string
} = {foo:"a string", bar: "another string", baz: 42} // is invalid baz is not of type string

在此示例中，该对象无效，因为baz的类型不是string

工会类型也将起作用

const baz: {
    [key: string]: string | number
} = {foo:"a string", bar: "another string", baz: 42} // is valid

example

因此，根据上述规则，我们可以分解此方法

该方法称为post，它带有三个参数：

URL -类型为string（在这种方法中，它是进行POST调用的URL）
正文-类型为any OR 或类型为null（在此方法中，它是发帖的正文）< / li>
选项：这一选项可能令人困惑，所以让我们对其进行分解：

options必须为object，它具有一个名为headers的可选键（它是可选的，因为它以问号结尾）。该密钥必须命名为标头，并且不能命名为其他名称。其他键和值无法插入！

headers必须是HttpHeaders类型（由angular制成的类） OR 一个 object，其中键可以转换为字符串由于几乎所有内容都可以转换为字符串，因此几乎所有内容都可以作为键。该值必须是字符串或字符串数组。

我希望这可以帮助您

Answer 2

您可以在headers属性上使用键值对，键将是一个属性名称，而该值当然是所述属性的值，例如：

headers: new HttpHeaders({
      'Content-Type':  'application/x-www-form-urlencoded',
      'Authorization': 'authToken'
    })

这些是随请求一起发送的标头，您可以在浏览器的开发工具的“网络”标签上检查这些标头

Answer 3

options是一个对象
它具有一个名为headers的可选属性
标题的类型为HttpHeaders或
多个属性，其键必须符合Index Signature，在这种情况下，这些属性必须是string
并且这些属性的值必须为string或string的数组

刚刚看到@jonrsharpe在问题下方的评论中说了同样的话，如果他发布了答案，我将删除我的答案

Angular HttpClient发布方法参数

3 个答案: