【问题标题】:How to return single type from function如何从函数返回单一类型
【发布时间】:2020-04-29 03:29:10
【问题描述】:

我正在尝试在 Typescript (React) 中构建一个辅助函数。我定义了一个基于响应数据返回objectobject[] 的函数。

现在,当我使用该函数时,返回 typeT | T[],根据数据,这需要是 TT[]

我的辅助函数

import { useQuery } from '@apollo/react-hooks';
import { flatMap } from 'lodash';

export default function QueryHelper<T> (document: any, variables?: {}) {
  const { data: responseData, loading, error } = useQuery(document, { variables });

  const object = (): T => responseData;
  const array = (): T[] => flatMap(responseData);
  let data;

  if (flatMap(responseData).length === 1) {
    data = object();
  } else {
    data = array();
  }
  return { data, loading, error };
}

调用函数

const objects = QueryHelper<Object>(multipleObjectsDocument); 
const object = QueryHelper<Object>(singleObjectDocument, { id });

返回类型

const Object: {
    data: Object| Object[]; // This needs to be 1 type
    loading: boolean;
    error: ApolloError | undefined;
}

主要思想是我可以打电话例如;

const name = object.data.name';
const listOfName = objects.data.map(obj => obj.name);

现在我收到以下错误 Property 'map' does not exist on type 'Object | Object[]'.

我还尝试根据 if 语句有条件地返回不同的变量,但这会返回;

const Object: {
    object: Object;
    loading: boolean;
    error: ApolloError | undefined;
} | {
    array: Object[];
    loading: boolean;
    error: ApolloError | undefined;
}

【问题讨论】:

    标签: reactjs typescript function graphql apollo


    【解决方案1】:

    刚刚修好了。

    export default function QueryHelper<T> (document: any, variables?: {}): queryResponse<T> {
      const { data: responseData, loading, error } = useQuery(document, { variables });
      let data = responseData ?? [];
    
      const array = flatMap(data);
    
      if (!loading && array.length === 1) {
        data = array[0];
      } else {
        data = array;
      }
    
      return { data, loading, error };
    }
    

    通话

    const objects = QueryHelper<Object[]>(MultipleObjectsDocument).data; // returns type Object[]
    const object = QueryHelper<Object>(ObjectDocument, { id }).data; // returns type Object
    

    【讨论】:

    • 我无需等待即可将其设置为“已解决”
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-09-22
    • 2019-11-08
    • 2021-05-18
    • 2020-07-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多