reactjs 如何正确使用satisles

r1wp621o  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(151)

我正在使用最新的TypeScript构建一个自定义React钩子。我在理解如何正确使用satisfies运算符方面遇到问题。我想使用它的原因是因为我无法传递条件值。
我的爱好:

import { useQuery } from 'react-query';
import { axiosClient } from '@src/features/@Api';
import type {
  FeathersFind,
  FeathersQuery,
} from '@features/@Api/@types/feathers';
import type { Model } from '@features/@Api/@types/models';

type Result = FeathersFind & {
  data: Model[];
};

type Query = FeathersQuery & Model;

export const useFetchModels = (query?: Query) => {
  const defaultQuery = {
    $limit: 1000,
    $sort: {
      createdAt: -1,
    },
    ...(query || {}),
  };
  const { isFetching, isLoading, refetch, data, ...rest } = useQuery(
    'query-models',
    async () => {
      const { data }: { data: Result } = await axiosClient.get('/models', {
        params: defaultQuery,
      });
      return data;
    },
    {
      cacheTime: 1000 * 60 * 60,
    }
  );
  return { isFetching, isLoading, refetch, data, ...rest };
};

如何使用

const [selectedMakeId, setSelectedMakeId] = React.useState('imagine-valid-id-here');
  const { data: models } = useFetchModels({
    makeId: selectedMakeId,
  });

错误:

Argument of type '{ makeId: string; }' is not assignable to parameter of type 'Query | undefined'.
 Type '{ makeId: string; }' is missing the following properties from type 'Model': _id, name, make, createdAt, updatedAt

类型:(已尝试FeathersQuery|模型;以及特征查询和模型;)

type Query = FeathersQuery | Model;
export type FeathersQuery = {
  $limit?: number;
  $skip?: number;
  $sort?: {
    [key: string]: 1 | -1;
  };
};
export type Model = {
  _id: string;
  name: string;
  make: Make;
  makeId: string;
  createdAt: Date;
  updatedAt: Date;
};

最终目标:我想有条件地传递来自两个对象的任何值。我猜我需要使用new运算符来满足它?

62lalag4

62lalag41#

代码缺少一些类型,所以很难100%确定其意图。
假设意图是将Model的任何字段作为useFetchModels钩子中的过滤器传递给我们,那么您实际上要查找的是Partial。这将允许您指定Model上存在的任何属性,但不要求您指定Model的所有必需属性(它使传入类型的所有属性都是可选的)

type Query = FeathersQuery & Partial<Model>;

Playground链接

相关问题