打字稿提取物精确区分有条件工会在迭代法中类型

Question

export type FILTER_META =
  | {
      type: 'string';
      key: string;
      filters: { id: string; label?: string }[];
    }
  | {
      type: 'time';
      key: string;
      filters: { min: string; max: string  }[];
    }
  | {
      type: 'range';
      key: string;
      filters: { min: number; max: number }[];
    };

 type Unpacked<T> = T extends (infer U)[] ? U : T;
 type Foo = Unpacked<FILTER_META['filters']>;

// how to determine comparer type from meta object
// comparer:Foo doesn't work
// const comparator = <T extends FILTER_META, U extends Unpacked<T['filters']>>(

const comparator = (meta: FILTER_META, item: any, comparer: any) => {
  const DATE_PREFIX = '1/1/2022 ';

  switch (meta.type) {
    case 'string':
      return item?.[meta.key]?.toLowerCase() === comparer.id?.toLowerCase();
    case 'time': {
      const { min, max } = comparer;
      const compTime = new Date(DATE_PREFIX + item?.[meta.key]);
      return (
        new Date(DATE_PREFIX + min) <= compTime &&
        compTime <= new Date(DATE_PREFIX + max)
      );
    }
    case 'range': {
      const { min, max } = comparer;
      const compItem = item?.[meta.key];
      return min <= compItem && compItem <= max;
    }
  }
};


const genericFilter =
  (filterMeta: FILTER_META[]) =>
  (list = []) =>
    list.filter((item) =>
      filterMeta
        .filter((fMeta) => fMeta.filters.length)
        .every((meta) =>
          meta.filters.some((ft: any) => comparator(meta, item, ft))
        )
    );

以上是通用过滤器FN，它试图根据过滤器类型过滤数组。 它提供了一系列不同的过滤器，该滤镜使用比较FN进行过滤。

如何键入第三参数比较：任何 type filter_meta

stackblitz链接 的第一个参数 https://stackblitz.com/edit/depescript-ku6bq7

Answer 1

switch（theValue）中的值 必须与您嵌套到（ie thevalue.filters.filters.id）中的变量相同。
Typescript将知道当前theValue的过滤器是“字符串”类型，而不是“时间”类型，仅仅是因为switch（thevalue.type）。 没有它，（即您当前的代码）Typescript不知道id是contrace>比较中的关键，因为它不知道<<<代码>比较是类型“字符串”，“时间”或“范围”的类型。这就是为什么comparer.id不是typescript-lim有效的原因，

例如，如果fo是明确的：
（注意：.filters是不是一个数组）

type fo =  {
  type: 'string';
  key: string;
  filters: { id: string; label?: string }; // not an array (is unpacked")
}
| {
  type: 'time';
  key: string;
  filters: { min: string; max: string }; // not an array (is "unpacked")
}
| {
  type: 'range';
  key: string;
  filters: { min: number; max: number }; // not an array (is "unpacked")
};

然后这起作用：

const comparator = (meta: FILTER_META, item: any, comparer: fo) => {
  const DATE_PREFIX = '1/1/2022 ';

  switch (comparer.type) {
    case 'string':
      return item?.[meta.key]?.toLowerCase() === comparer.filters.id?.toLowerCase();
    case 'time': {
      const { min, max } = comparer.filters;
      const compTime = new Date(DATE_PREFIX + item?.[meta.key]);
      return (
        new Date(DATE_PREFIX + min) <= compTime &&
        compTime <= new Date(DATE_PREFIX + max)
      );
    }
    case 'range': {
      const { min, max } = comparer.filters;
      const compItem = item?.[meta.key];
      return min <= compItem && compItem <= max;
    }
  }
};