🧹
filterメソッドから吐き出されるデータからundefinedを取り除きたい
filterメソッドから吐き出される型を制御する方法
TypeScriptで開発していると,配列の中身がundefinedになるケースがたまにあって,
['hoge', undefined, 'huga', undefined, 'hige']
// このときこの型は (string | undefined)[]
みたいな配列が生まれてしまうことがやむなし.みたいな状況になることがある.
このときこの型は(string | undefined)[]だが,
それをfilterメソッドを使って,
['hoge', undefined, 'huga', undefined, 'hige'].filter((v)=> !!v)
// 型は (string | undefined)[] のまま
みたいなことをするとすると思うのですが,型は変わらずundefinedが含まれていて,
おい(# ﾟДﾟ)
っというのを誰もが経験したことがあるかと思います.
これがJavaScriptなのです.
しかし,これを解決する書き方をCopilotさんに提案していただけたので共有します.
['hoge', undefined, 'huga', undefined, 'hige'].filter((v): v is string => !!v)
!!vの部分はtypeof v === "string"のほうが厳密ですが,これはお好きに.
これはユーザー定義のType Guardといって関数の戻り地にisを使って記述することができます.（詳しい説明は割愛）
Discussion