[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する

[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する

Clock Icon2023.03.10 21:22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

  • t_o_dと申します。
  • map関数で生成された配列等、配列内にundefinedが入るケースがあります。
  • その際にfilterで取り除くのですが、単純な条件だと型情報にはundefinedが残ったままです。
  • そこで今回は型もundefinedを取り除いた情報になるようにfilterする方法を記録いたします。

環境

  • mac OS Ventura 13.2.1
  • typescript 4.9.5

修正前

  • 修正前のコードは以下の通りです。
// 型 : ((string | number)[] | undefined)[]
const members = [
    [1, "takahashi"],
    [2, "kato"],
    undefined,
    [4, "saito"]
]

// 型は「((string | number)[] | undefined)[]」のまま
const selections = members.filter(member => member !== undefined);

// 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]]
console.log(selections)
  • 上記のようにundefinedを取り除くだけならfilterに条件を書くだけで可能ですが、型の情報にはundefinedが残ったままです。

修正後

  • 修正後のコードは以下の通りです。
// 型 : ((string | number)[] | undefined)[]
const members = [
    [1, "takahashi"],
    [2, "kato"],
    undefined,
    [4, "saito"]
]

// 型 : (string | number)[][]
const selections = members.filter((member): member is NonNullable<typeof member> => member !== undefined);

// 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]]
console.log(selections)
  • 修正内容として、filter関数内でユーティリティ型のNonNullableを利用しています。
  • NonNullable<任意の型>のように指定することで、nullundefinedを除いた型を新たに構築することができます。
  • その構築された型情報をis演算子で値に割り当てることで、型もundefinedを取り除いた情報として定義されます。
  • 以上です。

参考

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.