Question

Typescript compiler在尝试使用并集或多个类型/接口时始终引发错误。

我的要求

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

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

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

类型为'any []的属性'标题'不存在| {标头：string [];正文：任何[] []; }'

像number | boolean，string | null等一样，是否可以使用联合实现此功能？

Answer 1

Typescript - Advanced Types说

如果我们拥有一个具有联合类型的值，则我们只能访问该联合中所有类型都通用的成员。

因此您会收到错误消息，因为在联合中的所有类型中“标头”并不常见。

Answer 2

拥有类型联合时，您只能访问所有类型共有的成员。如果要说是一个，则需要一个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);
}

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

数组和对象类型的打字稿联合

3 个答案: