对象可能是"未定义的".ts(2532) 在函数检查后返回布尔值的函数

Question

我正在使用react和react-query，基本上我正在尝试用API调用的数据渲染英雄组件。

如果我使用这段代码，我不会有任何错误:

{!query && data && data?.pages && data.pages[0]?.results[0] ? (
<Hero
text={data.pages[0].results[0].overview}
title={data.pages[0].results[0].title}
imgUrl={
data?.pages[0]?.results[0]?.backdrop_path
? IMAGE_BASE_URL +
BACKDROP_SIZE +
data.pages[0].results[0].backdrop_path
: "./no_image.jpg"
}
/>
) : null}

但是当使用这段代码时(带有返回布尔值的辅助函数)，我有错误:对象可能是'undefined'.ts(2532)

{hasDataResults(query, data) ? (
<Hero
text={data.pages[0].results[0].overview}
title={data.pages[0].results[0].title}
imgUrl={
data?.pages[0]?.results[0]?.backdrop_path
? IMAGE_BASE_URL +
BACKDROP_SIZE +
data.pages[0].results[0].backdrop_path
: "./no_image.jpg"
}
/>
) : null}

函数助手:

const hasDataResults = (
query: string,
data: InfiniteData<Movies> | undefined
): boolean =>
Boolean(!query && data && data?.pages && data.pages[0]?.results[0]);

函数没有datareresults有相同的输出?请帮助

期望错误消失。尝试在辅助函数中添加更多条件。

Answer 1

Typescript不会在函数内部查找类型保护，但是你可以使用类型谓词声明一个函数:https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates

告诉Typescript你的布尔返回值到底是什么意思。返回true表示data为InfiniteData<Movies>类型

const hasDataResults = (
query: string,
data: InfiniteData<Movies> | undefined
): data is InfiniteData<Movies> =>
Boolean(!query && data && data?.pages && data.pages[0]?.results[0]);

---

如果您还需要说pages和results属性是定义的，您也可以在谓词中这样做。你也可以添加数组的类型，我只是不知道它们是什么。

const hasDataResults = (
query: string,
data: InfiniteData<Movies> | undefined
): data is InfiniteData<Movies> & {pages: {results: []}[]} =>
Boolean(!query && data && data?.pages && data.pages[0]?.results[0]);