TypeScript，——strictNullChecks模式。
假设我有一个可空字符串数组(string | null)[]。什么是单表达式的方式，以这样的方式删除所有的空值，结果有类型字符串[]?
const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray: string[] = ???;
数组中。过滤器在这里不起作用:
// Type '(string | null)[]' is not assignable to type 'string[]'
array.filter(x => x != null);
数组推导式可以工作，但TypeScript不支持。
实际上，这个问题可以推广为通过从联合中删除具有特定类型的项来过滤任何联合类型的数组的问题。但是让我们关注带有null和可能未定义的联合，因为这些是最常见的用例。
当前回答
你可以将你的筛选结果转换为你想要的类型:
const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray = array.filter(x => x != null) as string[];
这适用于你提到的更一般的用例，例如:
const array2: (string | number)[] = ["str1", 1, "str2", 2];
const onlyStrings = array2.filter(x => typeof x === "string") as string[];
const onlyNumbers = array2.filter(x => typeof x === "number") as number[];
(操场上的代码)
其他回答
类似于@ bijouu -trouvaille的回答，你只需要声明<arg> is <Type>作为过滤器函数的输出:
array.filter((x): x is MyType => x !== null);
使用减少
一些答案建议减少，下面是如何减少的:
const languages = ["fr", "en", undefined, null, "", "de"]
// the one I prefer:
languages.reduce<string[]>((previous, current) => current ? [...previous, current] : previous, [])
// or
languages.reduce((previous, current) => current ? [...previous, current] : previous, Array<string>())
// or
const reducer = (previous: string[], current: string | undefined | null) => current ? [...previous, current] : previous
languages.reduce(reducer, [])
结果:(“fr”、“en”、“de”)
这里是TS游乐场。
结合上面我最喜欢的答案之一，与一些通用技巧和对Array接口的扩展，我能够做出一个全局定义，添加到您的模块后，允许任何数组被“压扁”，删除所有空值替换(任何|undefined|null)[]与任何[]。
mixedarray . squash()适合链接和映射。
只需在模块的某个地方添加这段代码(可以随意省略eslint的东西，但我的set在这里的一些事情让我感到困扰):
/* eslint-disable no-unused-vars */
/* eslint-disable no-extend-native */
declare global {
interface Array<T> {
squish<NonNull, Nullable extends (NonNull | undefined | null)>(): NonNull[];
}
}
if (!Array.prototype.squish) {
Array.prototype.squish = function squish<NonNull, T extends(NonNull|undefined|null)>
(this: T[]): NonNull[] {
return this.flatMap((e) => (e ? [e] : [])) as NonNull[]
}
}
我相信除了类型检查只是让过滤后的类型与返回类型不不同之外，您都做得很好。
const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray: string[] = array.filter(f => f !== undefined && f !== null) as any;
console.log(filterdArray);
你可以在.filter中使用类型谓词函数来避免选择退出严格的类型检查:
function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
return value !== null && value !== undefined;
}
const array: (string | null)[] = ['foo', 'bar', null, 'zoo', null];
const filteredArray: string[] = array.filter(notEmpty);
你也可以使用array.reduce<string[]>(…)。
2021年更新:更严格的谓词
虽然这种解决方案适用于大多数场景，但您可以在谓词中进行更严格的类型检查。如前所述，函数notEmpty实际上并不能保证它在编译时正确地识别值是null还是undefined。例如，尝试将其return语句缩短为return value !== null;，您将不会看到编译器错误，即使函数将在undefined上错误地返回true。
缓解这种情况的一种方法是首先使用控制流块约束类型，然后使用一个虚拟变量让编译器进行检查。在下面的例子中，编译器能够推断出value参数在赋值时不能为null或未定义。但是，如果您从if条件中删除|| value === undefined，则会看到编译器错误，通知您上面示例中的错误。
function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
if (value === null || value === undefined) return false;
const testDummy: TValue = value;
return true;
}
提醒一句:在某些情况下，这种方法仍然会失败。一定要注意与逆变相关的问题。
