添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
着急的跑步鞋  ·  Fix 'Binding Element ...·  3 周前    · 
任性的硬币  ·  Redis ...·  3 月前    · 
烦恼的上铺  ·  dart:convert | Dart 编程语言·  3 月前    · 
伤情的凉茶  ·  mysql with rollup ...·  5 月前    · 
  const nullableArray = ["ほげほげ", null, "ふぁふぁ", null,100];
  const filteredArray = nullableArray.filter((item) => {
    return item !== null

filterの型定義は下記のようになっていた。返り値がT[]、つまりfilterメソッドの第一引数で渡したコールバック関数の第一引数に入る値の型配列になる。この型をみると、nullableな値を取り除いた型にならないことがわかる

 filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];

(GitHubのissueでも見つけたけど、全て追えていない・・・)

asを使う

  const nullableArray = ["ほげほげ", null, "ふぁふぁ", null ,100];
  const filteredArray = nullableArray.filter((item) => {
    return item !== null
  }) as (string | number)[]

(安易にasを使用することで型安全とは言えなくなってしまうのでできる限り避けたい…)

ここで敗北者のTypeScriptの一文を引用します。

  const nullableArray = ["ほげほげ", null, "ふぁふぁ", null, 100];
  const filteredArray = nullableArray.filter((item):item is string => {
    return item !== null

is演算子で型ガードを行い、(string | number)[]に絞り込む
ユーザー定義型ガードによる解決と型安全性 で指摘されている通り、実装が正しいかのチェックまでは行えないため下記のような実装をしてしまった場合、意図しない挙動を孕む危険性が高まる

  const nullableArray = ["ほげほげ", null, undefined, null, 100];
  const filteredArray = nullableArray.filter((item):item is string => {
    return item !== null
  })  // (string | number)[] だけど実際にはundefinedも存在している

またユーザー定義の型ガードでいうとNonNullableというユーティリティ型を使用することもできる

  const nullableArray = ["ほげほげ", null, null, null, 100];
  const filteredArray = nullableArray.filter((item):item is NonNullable<typeof item> => {
    return item !== null
  })  // (string | number)[] 

どちらにせよ実装を保証するテストも一緒にあると安全に近づくと言えそう。。。

flatMapを使う

flatMapを使い、nullableな値であれば空配列を返すようにする。flatMapは最終的に配列内を平坦化したもの返却してくれるので下記の例だと (string | number)[] となる。

 const nullableArray = ['ほげほげ', null, null, null, 100];
  const filteredArray = nullableArray.flatMap((item) => {
    return item ?? [];
  });   // (string | number)[] 

【TypeScript】配列の型を絞り込むときはflatMapがおすすめ