🐷

TypeScriptの配列でnullableなものを外す

2021/08/16に公開4件

undefinedな値が入る可能性がある配列がある場合、filterを使ってnullableなものを排除しますが、typescriptではそのままではうまく認識されません。

const item = ['a', undefined, 'b', 'c', 'd'];

const ret = item.filter(i => i !==  undefined && i !== null);
// const ret: (string | undefined)[]

TypeScript Playgroundでのテスト

調べると、type guradを定義すればいいって記述があったので、以下のように実行してみました。が、うまく処理してくれません。

const nonNullable = (item: string | undefined): item is string => {
    return item !== undefined && item !== null;
}

const ret2 = item.filter(i => nonNullable(i));
// const ret2: (string | undefined)[]

type guradをfilterの関数内に記述してあげると、意図した通りに定義できます。

const ret3 = item.filter((i): i is string => i !== undefined && i !== null);
// const ret3: string[]

Discussion

pkpk

これで取り除いているのは nullable ではなく falsy だと思います。

merutin

確かにその通りですね。修正しました。

tan_t

i=> nonNullable(i)は普通の関数なので返り値がitem is stringではなく単なるbooleanになっているのが原因ですね。

const nonNullable = (item: string | undefined): item is string => {
    return item !== undefined && item !== null;
}

const ret4 = item.filter(nonNullable);
// const ret4: string[]

これでもいけますね。

tan_t

あとnonNullable関数はstringに固定する必要無いと思うのでさらにいえば以下のように書けますね。

const genericNonNullable = <T,>(item: T): item is T => item !== undefined && item !== null;