🐷

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

1 min read 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

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

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

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[]

これでもいけますね。

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

const genericNonNullable = <T,>(item: T): item is T => item !== undefined && item !== null;
ログインするとコメントできます