Help us understand the problem. What is going on with this article?

TypeScript: string | undefinedな配列からundefinedを取り除く処理の型付けをしっかりする方法

この投稿はTypeScriptで(string | undefined)[]のようなstringundefinedが入る配列からundefinedを取り除く処理をfilterメソッドで書くとき、filterメソッドが返す型をstring[]にする方法を紹介します。

問題点

次のようなstringundefinedが入り混じった配列があり、

const items: (string | undefined)[] = ['a', undefined, 'b', undefined, 'c']

ここからundefinedだけを取り除きstringだけの配列を作りたいとします。

Array.prototype.filterを使うと、1行でその処理が実装できるのはご存知かと思います:

const stringItems = items.filter(item => item !== undefined)
// or
const stringItems = items.filter(item => typeof item === 'string')

処理自体はこれでいいのですが、問題点が1つあります。それは、stringItemsの型がstring[]にならず、元配列の(string | undefined)[]のままになるという点です。このせいで、stringItemsstring[]だと思って処理しようとするコードはコンパイルエラーになってしまいます:

before.png
Playground Link

解決策: ユーザ定義タイプガードを使う

filterの戻り値をstring[]に型付けするにはどうしたらいいのでしょうか?

解決策のひとつは、filterに渡す関数をユーザ定義タイプガード関数にすることです。普通の関数との書き方の違いは、戻り値の型をbooleanではなく、引数名 is 型にする点です。

今回の例では型は string[] に揃えるので typeof item == 'string' の方法を採用します。

// 普通の関数
const f1 = (item): boolean => typeof item == 'string'

// ユーザ定義タイプガード関数
const f2 = (item): item is string => typeof item == 'string'

ユーザ定義タイプガード関数の詳細は他ドキュメントをご参照ください。

このユーザ定義タイプガード関数をfilterに渡してあげると、filterstring[]型を返すものとコンパイラに解釈させることができます:

const stringItems = items.filter((item): item is string => typeof item == 'string')

これにより、先程コンパイルエラーになっていたコードの問題も解決されます:
after.png
Playground Link

おまけ: 「取り除く」という意味合いにする

上記の解決策で問題自体は解消しましたが、filter(item => typeof item == 'string')の部分が「undefinedを取り除く」というより「stringに絞り込む」という意味合いのコードになっているので、おまけとして「取り除く」という意味になるコードも考えてみたいと思います。

undefinedを取り除くということは、string | undefinedならstringに、string | number | undefinedならstring | numberになるべきです。そういう型のマッピングをするのに便利なのがExclude<T,U>型です。

これを使って「取り除く」路線で実装したコードが次になります:

const stringItems = items.filter(
  (item): item is Exclude<typeof item, undefined> => item !== undefined
)

ちなみにこの実装であれば、items(string | undefined)[]から、(string | number | undefined)[]になったとき、filterが返す型もそれに追従して、(string | number)[]になるといった仕掛けになります:

const items: (string | number | undefined)[] = ['a', undefined, 'b', undefined, 'c']

const stringOrNumbers: (string | number)[] = items.filter(
    (item): item is Exclude<typeof item, undefined> => item !== undefined
)

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです:relieved:Twitter@suin

suin
Qiita 4位/TypeScript入門書執筆中/TypeScripterのための座談会「YYTypeScript」主催/『実践ドメイン駆動設計』書籍邦訳レビュア/分報Slack考案/YYPHP主催/CodeIQマガジン執筆/株式会社クラフトマンソフトウェア創設/Web自動テスト「ShouldBee」の開発/TypeScript/DDD/OOP
https://yyts.connpass.com/
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away