Question

我有一个定义如下的数组：

<nav class="nav-bar-blur">
</nav>
<nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

和如下功能：

.nav-bar-blur {
    background-image: url('https://www.fillmurray.com/1500/1500');
    width: 100%;
    height: 70px;

    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.navbar {
    height: 70px;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
}

如果我用不为null的方式过滤myArr，然后尝试使用myFunc进行映射，则会由于MyType | MyType而导致编译错误。 null不可分配给MyType。我知道为什么会这样，但这是过滤器和地图代码：

const myArr: (MyType | null)[] = [];

如果我强制转换filter的结果：

const myFunc = (myObj: MyType) => /* do sth */;

它可以编译，但是我不喜欢这样强制转换。 TypeScript是否可以推断出过滤后的数组具有不同的类型定义？

Answer 1

是的，您需要一个类型保护。

const notNullResults = this.myArray.filter((str): str is NonNullable<string> => str !== null) // string[]

请注意，我们正在使用is运算符以及内置的通用NonNullable<string>类型来表示我们只希望使用字符串

有没有办法让Typescript推断数组中不再有null值？

1 个答案: