javascript - TypeScript:为什么我的过滤方法无法缩小类型并从数组中消除未定义和错误

Question

我有来自 d.ts 的这种类型API 文件

type EventConfigurations = {
  Event1: {
    Enabled?: boolean;
  };

  Event2: {
    Enabled?: boolean;
  };

  Event3: {
    Enabled?: boolean;
  };
};

现在我从那个 API 调用的响应中得到了这些数据

const eventConfigurations: EventConfigurations = {
  Event1: { Enabled: true },

  Event2: { Enabled: false },

  Event3: { Enabled: true }
};

现在我想将数据映射到

enum EventDesc {
  Event1 = "XXX",
  Event2 = "YYY",
  Event3 = "ZZZ"
}

type MyEvent = {
  eventDesc: EventDesc;
  topic: EventTopic;
};

const eventConfigurations: EventConfigurations = {
  Event1: { Enabled: true },
  Event2: { Enabled: false },
  Event3: { Enabled: true }
};

const events: MyEvent[] = (Object.keys(eventConfigurations) as Array<
  keyof EventConfigurations
>)

  .map(
    (eventType) =>
      eventConfigurations[eventType].Enabled &&
      ({
        eventDesc: EventDesc[eventType],
        topic: EventTopic[eventType]
      } as MyEvent)
  )

  .filter(Boolean);

并且编译器提出了一个错误，指出 events可能是

(false | MyEvent | undefined)[]

但我添加了 .filter(Boolean);在 map 的末尾, 它应该消除它是 false 的可能性或 undefined .
这是现场演示 https://codesandbox.io/s/thirsty-yonath-ttdhn?file=/src/index.ts

Answer 1

TypeScript 的标准库是 have a signature for Array.prototype.filter() 这将缩小数组的类型，但仅当编译器将传入的回调识别为 type guard function 时才会使用该签名。其返回类型是 paramName is SomeType 形式的类型谓词.而且，不幸的是，编译器目前无法推断回调(如 Boolean 或 x => !!x )是类型保护；你必须这样注释它。
(请参阅 microsoft/TypeScript#16069 以了解使用某种控制流分析将某些函数解释为类型保护的功能请求。)
这是一个这样的带注释的回调:

const truthyFilter = <T>(x: T | false | undefined | null | "" | 0): x is T => !!x;

或者如果你真的想要你可以使用 Boolean作为具有类型断言的实现，例如

const truthyFilter2 = Boolean as any as <T>(x: T | false | undefined | null | "" | 0) => x is T;

这是一种通用的真实性检测器，尽管 TypeScript 并没有很好的方法来表示类型系统中所有可能的虚假值(例如， NaN 是无法表示的)。无论如何，您可以像这样看到它:

function fn(arr: Array<false | undefined | MyEvent>) {

  const item = arr[0];
  if (truthyFilter(item)) {
    item.eventDesc; // okay, no error
  }

现在，如果您将它与 filter() 一起使用编译器将按预期缩小范围:

  const myEvents = arr.filter(truthyFilter)
  // const myEvents: MyEvent[]

好的，希望有帮助；祝你好运!
Playground link