Array 和 Object 类型的 Typescript 联合答案

【问题标题】：Typescript union of Array and Object typesArray 和 Object 类型的 Typescript 联合
【发布时间】：2018-08-02 17:33:01
【问题描述】：

Typescript compiler 在我尝试使用联合或多个类型/接口时不断抛出错误。

我的要求

我从服务器收到一个对象作为响应，其中一个键 ('errorMessages') 的数据类型为 string[]，另一个键 ('data')可以是object 或array。我为此写了一个interface，应该如下所示：

interface MyServerResponse {
    errorMessages: string[];
    data: {
        headers: string[];
        body: any[][];
    } | any[]>;
}

在尝试访问 'headers'
时收到编译器错误

属性 'headers' 不存在于类型 'any[] | {标题：字符串[]；正文：任何[][]； }'

难道不能像number | boolean、string | null 等那样使用联合来实现吗？

【问题讨论】：

any[] 不应该在 body 上吗？ interface MyServerResponse { errorMessages: string[]; data: { headers: string[]; body: any[][]| any[]; } ; }
不，数据中的body 键始终是any[][]。我想要数据键上的联合（正如问题中提到的那样）。更新了问题以更清晰。

标签： typescript

【解决方案1】：

当你有一个类型联合时，你只能访问所有类型共有的成员。如果你想说它是一个或另一个，你需要一个type guard 让编译器知道它是正确的类型：

// this type isn't needed but it makes the code more readable
type headersBody = { headers: string[]; body: any[][] }; 

function isHeadersBody(obj: headersBody | any[]): obj is headersBody {
    return !Array.isArray(obj);
    // or better yet
    // return Array.isArray(obj["headers"]) && Array.isArray(obj["body"]);    
}

let obj: headersBody | any[];

if (isHeadersBody(obj)) {
    console.log(obj.body.length);
}

【讨论】：

【解决方案2】：

Typescript - Advanced Types 说

如果我们有一个联合类型的值，我们只能访问联合中所有类型共有的成员。

所以你得到了错误，因为“标题”在联合中的类型中并不常见。

【讨论】：

【解决方案3】：

要告知 TypeScript 你期望哪些接口，你可以在这个特定的函数中转换变量：

interface dataTypeResponse {
    headers: string[];
    body: any[][];
}

interface MyServerResponse {
    errorMessages: string[];
    data: dataTypeResponse | any[];
}

doTheMagic(d: MyServerResponse) {
   // access it like this:
   const headers = (<dataTypeResponse>d.data).headers;
}

【讨论】：