LoginSignup
0
0

More than 3 years have passed since last update.

typescriptのType predicatesを使って、配列からundefinedを取り除く式を型安全に書く

Last updated at Posted at 2019-06-27

背景

配列の中にundefinedが紛れていて、それを取り除いた配列を作りたい場合、例えばrubyだと

# ruby
2.5.5 (main)> ["foge", nil, "huga", "foga", nil, "fuge"].compact 
=> ["foge", "huga", "foga", "fuge"]

こんな感じでパッとかけますが、jsだと多少面倒。

// javascript
["foge", undefined, "huga", "foga", undefined, "fuge"].filter(e => e)
 => ["foge", "huga", "foga", "fuge"]

これをtypescriptで書くと悲しいことに、

// typescript
const newArray = ["foge", undefined, "huga", "foga", undefined, "fuge"].filter(e => e);

この newArray の型が、 (string | undefined)[] となってしまう。これをどうにかして string[] にしたいよね、という話。

解決策: Type predicates を使う

公式ドキュメント

例はこんな感じ。

function isHoge(s): s is Hoge {
  return typeof s === 'hogehoge';
}

この例では訳わからないことをしていますが、あくまで例として。

type predicatess is Hoge 部分です。
なにをやっているかを一言で言うと、 この関数がtrueを返す場合、パラメータsの型をHogeとする ということです。

これを使って色々なものが書きやすくなりますが、今回はあくまで上記の filter の例にかぎって紹介します。

完成形

const newArray = ['foge', undefined, 'huga', 'foga', undefined, 'fuge'].filter((e): e is string => Boolean(e));

つまり、 Boolean(e) がtrueを返す場合(この場合だと undefined 以外)、estringとする、と宣言しているわけです。

これで、 newArray の型が、 string[] となります。

PS

typescript強者の方、これよりも良い方法があればご教示ください...

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0