时间戳

首页 > 解决方案 > 类型上不存在属性“标题”？

typescript - 类型上不存在属性“标题”？

问题描述

通过 23 行，我得到此属性 'title' 在类型 'faceProductList | 上不存在 faceProductList[]'为什么会出现这样的错误来解决呢？

代码

interface faceProductList {

  readonly title: string;
  readonly price: string;
  readonly prodState: string;
  readonly shipping: string;
  readonly sold: string;
  readonly src: string;
  readonly id: string;
  readonly to: string;
}

class Server {
    private url: string = 'https://foo0022.firebaseio.com/';
    public async request(id: string): Promise<(faceProductList[] | faceProductList)[]> {
        const res = await fetch(`${this.url}${id}`);
        const resArr: (faceProductList[] | faceProductList)[]  = await res.json();
        return resArr;
    }
    public async handler(id: string, valueSearch: string) { 
        await this.request(id)
        .then((array) => { 
            if(id){ 
              return  array.filter(({title}) => title.includes(valueSearch))
            }

            })
    }
}

标签： typescript

解决方案

您的请求将返回 a (faceProductList[] | faceProductList)[]，这意味着每个数组项是 afaceProductList或数组faceProductList。该错误告诉您如果要过滤的项目是数组，则过滤器不起作用。

根据您的确切要求，您可以在过滤之前展平结果集：

return array
  .reduce((acc: faceProductList[], cur) => (Array.isArray(cur) ? acc.concat(cur) : acc.push(cur), acc), [])
  .filter(({ title }) => title.includes(valueSearch))

注意：您也可以使用内置flat方法，但请参阅此答案。

或者你可以重写你的过滤条件来处理这两种情况：

return array
  .filter((item) => Array.isArray(item)
    ? item.some(({ title }) => title.includes(valueSearch))
    : item.title.includes(valueSearch))

如果先将其展平并将其保存到单独的变量中，则可以更简洁地编写它：

const flatArray = array.reduce((acc: faceProductList[], cur) => (Array.isArray(cur) ? acc.concat(cur) : acc.push(cur), acc), []);
if (id) {
  return flatArray.filter(({ title }) => title.includes(valueSearch));
}

return flatArray;

推荐阅读