我正在尝试在Typescript(React(中构建一个辅助函数。我定义了一个基于响应数据返回object
或object[]
的函数。
现在,当我使用该函数时,返回type
T | T[]
,这需要根据数据进行T
或T[]
。
我的助手函数
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;
}
刚刚修复了它。
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