Zenn
🐷

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

2021/08/16に公開4件
TypeScript
tech

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

pkpkpkpk

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

tan_ttan_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_ttan_t

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

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