Typescript和filter Boolean

15 浏览
0 Comments

Typescript和filter Boolean

考虑以下在打开strictNullChecks的情况下的代码：

var a: (number | null)[] = [0, 1, 2, 3, null, 4, 5, 6];
var b: { value: number; }[] = a.map(x => x != null && { value: x }).filter(Boolean);

编译失败的原因是：

类型“(false | { value: number; })[]”不能赋值给类型“{ value: number; }[]”。
  类型“false | { value: number; }”不能赋值给类型“{ value: number; }”。
    类型“false”不能赋值给类型“{ value: number; }”。

但是很明显，false将通过.filter(Boolean)被过滤掉。

null也有同样的问题。

是否有一种方法（除了写as number[]）来标记值不包含false或null？

0

3 答案

0 Comments

在上述代码中，我们有一个数组`a`，其中包含了数字和`null`值。我们想要从这个数组中筛选出所有非`null`的值。但是，如果直接使用`filter`方法，它将不会排除`null`值，因为在JavaScript中，`null`被认为是一个falsy值。

为了解决这个问题，我们可以使用`Boolean`函数作为`filter`方法的参数，来过滤掉所有falsy值。但是，我们需要创建一个类型`ValidValue`来排除我们不想要的值，即`null`、`undefined`、`0`、`''`和`false`。我们可以使用`Exclude`类型来实现这一点。然后，我们定义了一个名为`BooleanFilter`的函数，它接受一个泛型参数`T`，并检查这个参数是否是`ValidValue`类型。最后，我们使用`Object.values(a).filter(BooleanFilter)`来过滤数组`a`中的值，并将结果存储在`values`变量中。

通过运行上述代码，我们可以看到`values`数组中只包含了非`null`的数字值`[1, 2, 3, 4, 5, 6]`。这就是我们想要的结果。

总结起来，上述代码中的问题是我们想要从一个数组中筛选出非`null`的值，但是直接使用`filter`方法无法实现。解决方法是创建一个类型来排除我们不想要的值，并使用`Boolean`函数作为`filter`的参数来过滤掉falsy值。

0
0 Comments

问题的出现原因是希望在不改变生成的JavaScript代码的情况下，强制TypeScript编译器识别Boolean作为防止false值的守卫。

解决方法是通过声明一个类型守卫函数ExcludesFalse，并将其作为类型断言传递给Array.filter()方法。

具体实现代码如下：

type ExcludesFalse = (x: T | false) => x is T;     
var b: { value: number; }[] = a
  .map(x => x != null && { value: x })
  .filter(Boolean as any as ExcludesFalse);

这段代码之所以能够工作是因为通过类型断言将Boolean声明为类型守卫，并且由于Array.filter()方法在回调函数是类型守卫时会返回一个缩小范围的数组。

上述代码是我能想到的既能工作又不改变生成的JavaScript代码的最简洁的代码。常量Boolean被声明为全局BooleanConstructor接口的实例，你可以将类似于ExcludesFalse的类型守卫签名合并到BooleanConstructor中，但不能以.filter(Boolean)的形式使用。

你还可以使用更复杂的类型守卫来表示防止所有假值（除了NaN），但在你的例子中不需要。

希望这能帮到你，祝好运！

甚至可以这样做：

const ExcludesFalse = Boolean as any as (x: T | false) => x is T;
array.filter(ExcludesFalse);

在3.1.6版本中，以下代码也能工作：

.filter((n?: T): n is T => Boolean(n))

0
0 Comments

在上述代码中，我们看到了两个函数：nonNullable和truthy。这些函数的目的是过滤出在数组中非空（非null和非undefined）和真值的元素。

首先，让我们看一下非空过滤函数nonNullable。这个函数使用了TypeScript 2.8版本中引入的预定义条件类型NonNullable。这个函数的类型签名是：

function nonNullable<T>(value: T): value is NonNullable<T>

这个函数接受一个值作为参数，并使用value is语法来指定返回类型。如果传入的值不是null或undefined，那么这个函数返回true，否则返回false。通过使用这个函数作为filter方法的回调函数，我们可以过滤掉数组中的null和undefined元素。

接下来，让我们来看一下真值过滤函数truthy。这个函数使用了TypeScript中的条件类型和联合类型。这个函数的类型签名是：

function truthy<T>(value: T): value is Truthy<T>

这个函数接受一个值作为参数，并使用条件类型来确定返回类型。如果传入的值是false、空字符串''、数字0、null或undefined，则返回never类型，表示这个值是假值。否则，返回传入的值的类型。通过使用这个函数作为filter方法的回调函数，我们可以过滤掉数组中的假值元素。

总结一下，这些函数的目的是过滤出数组中非空和真值的元素。通过使用nonNullable函数，我们可以过滤掉数组中的null和undefined元素；而使用truthy函数，我们可以过滤掉数组中的假值元素。这些函数在TypeScript中提供了一种简洁和类型安全的方式来过滤数组元素。

文章主要原因是介绍了如何使用TypeScript中的条件类型和预定义条件类型来过滤数组中的元素，并给出了相应的解决方法。这些函数非常有用，可以帮助我们快速地过滤出非空和真值的元素。

0