TypeScript 5.5のfilterで型が絞り込めない

Question

発生している問題

filteredNames1, filteredNames2, filteredUserNames2は期待通りの動作をしています。
しかし、filteredUserNames1は型が (string | null)[] のままになっており、nullが消えていません。
string[]になる事を期待していました。

filterを先に実行してからmapを実行したい場合も今後あると思います。
filterを後に書かなければ現状型が正しくありません。
filterを先に書いても型が正しくなる方法はありますか？
それとも、filterを先に書いた場合はnullになる事がありえるのでしょうか？（私は無いと思っていますが）

該当のソースコード

TypeScript Playground

const names = [ 'a', 'b', null]

const filteredNames1 = names
  .filter(name => name !== null)
  .map(name => name)
// const filteredNames1: string[]

const filteredNames2 = names
  .map(name => name)
  .filter(name => name !== null)
// const filteredNames2: string[]

// -----------------------------------
interface User {
  id: number;
  name: string | null;
}

const users: User[] = [
  { id: 1, name: '田中太郎' },
  { id: 2, name: '山田太郎' },
  { id: 3, name: null },
]

const filteredUserNames1 = users
  .filter(user => user.name !== null)
  .map(user => user.name)
// const filteredUserNames1: (string | null)[]

const filteredUserNames2 = users
  .map(user => user.name)
  .filter(userId => userId !== null)
// const filteredUserNames2: string[]

試したこと

• 上記のようなサンプルプログラムを作成しました。実行結果からobjectの場合はfilterの順序が大事になってくると思いました。

補足情報（FW/ツールのバージョンなど）

• TypeScript 5.6.2

Answer 1

他のWebサイトで既に回答がありました
https://stackoverflow.com/questions/78756960

Answer 2

解説はどなかにお願いしたいですが(つまりよくわかってない)

const filteredUserNames1 = users
  .filter((user): user is {id: number, name: string} => user.name !== null)
  .map(user => user.name)

で filteredUserNames1 が string[] に推論されます

参考
https://blog.logrocket.com/filtering-typescript-value-types/#filtering-using-custom-type-guard-type-predicate

Comments

[hupyaginu]

確かに型指定してあげるとstring[]になりますね。
.map(user => user.name!) と書いても同じことが実現できそうです。
filterした時点で型が絞り込まれているのが理想ですが、そうはならないのですよね。。。

[quickquip]

この filter で型が変わってしまうと

const filteredUsers = users.filter(user => user.name !== null);
filteredUsers.push(otherUser);

が通らなくなってしまいます。それもどうかと思いますが……??
（otherUsers が Userのつもり）

[maisumakun]

> それもどうかと思いますが……??

実際に、(string|null)[]などでfilterを行ってstring[]を抽出すると、そのような挙動になります。

[quickquip]

確かにそうですね。どこかまではやる、どこかからは違和感がでる（人がいる）からやらない、というデザインの意思決定問題なだけですか

Answer 3

filterを先に実行してからmapを実行したい場合も今後あると思います。

本題ではありませんが、flatMapを使えばfilterとmapの両方をいっぺんにこなすことができますので、「filterを先に実行してからmapを実行したい場合」自体が発生しません。

const filteredUserNames1 = users
  .flatMap(user => user.name === null ? [] : [user.name])

Comments

[hupyaginu]

回答有り難うございます。
maisumakun様が「本題ではありませんが」とおっしゃっている通り、確かにやりたい事は実現できますが、コードの読みやすさが悪くなります。
mapとfilterを組み合わせで実現したいです。

基本的にflatMapというメソッドを見ると配列の処理だと想像するはずです。
例えば [1,2,[3,4],5] を [1,2,3,4,5] にしたい時に使ったりを想像します。
flatMapでfilterのような処理をする事は普通考えないはずです。

[maisumakun]

どうも、Type predicate inferenceは、「Foo | Bar」のような、トップレベルで複数選択となっている型だけに適用されて、Userのnameだけを絞り込む機能はなさそうです。

> flatMapでfilterのような処理をする事は普通考えないはずです。

それこそ、こんな記事もあります。

https://zenn.dev/spacemarket/articles/51613197db688d