javascript - (Number | undefined)[] 不可分配给 Number[]

Question

我在 typescript 中遇到类型问题。

所以我有一个从一些复选框中获得的 som ID 数组。该数组也可以为空。

可以从submit()返回的值的示例:

const responseFromSubmit = {
1: {
  id: "1",
  value: "true"
  },
2: {
  id: "2",
  value: "false"
  },
3: {
  id: "3",
  value: "false"
  } 
};



const Ids: number[] = Object.values(submit()!)
  .map(formfield => {
    if (formfield.value === 'true') {
      return Number(formfield.id);
    }
  })
  .filter(id => id != undefined);

因此在这种情况下，Ids 将为 Ids = [1]。

我尝试了几种解决方案，例如尝试通过检查 Ids 是否未定义来更改上面代码块之后的 Ids 值:

if (ids.length > 0){
  ids = []
}

通过这段代码，常量 Ids 的类型为 (Number | undefined)[]，我怎样才能使其始终为 number[] 类型，即使它为空？

这是一个解决方案，但我根本不喜欢它:

const Ids: number[] = Object.values(submit()!)
  .map(formfield => {
    if (formfield.value === 'true') {
      return Number(formfield.id);
    } else {
      return 0;
    }
  })
  .filter(id => id != 0);

在我的例子中，formfield.id永远不会有值0，因此可以过滤所有值为0的元素。所以我不会推荐这个解决方案。但是嘿，它有效，对吧？ ́\_(ツ)_/́

Answer 1

问题

主要问题是.filter()签名。它总是返回一个与开始时类型相同的数组。 TypeScript 编译器不可能保证其他任何事情。这是一个例子:

const arr/*: (string | number) */ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => typeof x === "number");

console.log(numbers);

Playground Link

如果您忽略类型，则此有效，但它在功能上等效于以下内容:

const arr/*: (string | number)[]*/ = ["one", 2, 3, "four", 5, 6];

const numbers/*: number[]*/ = arr.filter(x => x !== "one");

console.log(numbers);

Playground Link

在这两种情况下，您都有一个混合类型的数组和一些过滤功能。为了保证结果只是特定类型，您需要检查代码并做出推断。然而，这不是编译器的工作方式 - 调用 .filter()上Array<T | U>只能产生Array<T | U>同样，通用性没有改变。

解决方案

你可以做的就是翻转你的 .map 的顺序和.filter 。您需要重写它们，但它在类型方面可以正常工作。我还使逻辑更加连贯 - 现在您正在隐式进行双重过滤。 map()只会转换某些类型，而不转换其他类型，从而进行间接过滤。实际.filter()然后调用筛选未映射/软过滤的值。

正确的逻辑和正确的类型保存如下:

const Ids: number[] = Object.values(submit()!)
  .filter(formfield => formfield.value === 'true')
  .map(formfield => Number(formfield.id))

Playground Link

这是您想要的逻辑的更短且更正确的形式。

• 真实过滤条件formfield.value === 'true'在 .filter() 中自行提取打电话。
• .filter() 首先运行，因此从编译器的 Angular 来看，您保证具有相同的类型并且您刚刚将列表缩小到仅包含您感兴趣的项目。
• .map()不完全符合其含义 - 数组的每个值的 1:1 映射。它不需要做任何更复杂的逻辑。因此，它不需要关心什么是正确的或不正确的来执行转换。