Array.filter ← これで型が絞れるようになるらしい

はじめに

いつも使っているArray.filter、TypeScriptで使用する上でどうしても不便なところがありました
それが修正されるかもしれないので私と同じように不便だと思っている人のために記事を書いてみました。

2024/3/18/21:49 更新
@uhyo_さんのご指摘により、改善後の例文を修正しました。

ご指摘頂いたポストはこちら

今までのfilter

const fruits = ['Apple', 'Banana', undefined]

const result = fruits.filter(x => x !== undefined)
// const result: (string | undefined)[]
console.log(result) // ['Apple', 'Banana']

このように、resultという変数にundefinedがない状況でもfilterを使用した場合は型が絞られませんでした。
Javascriptに慣れてきて、TypeScriptに足を踏み入れた頃は本当にここで躓きました、、
それが近い未来、変わるかもしれません。

これからのfilter

const fruits = ['Apple', 'Banana', undefined]

const result = fruits.filter(x => x !== undefined)
// const result: (string)[]
console.log(result) // ['Apple', 'Banana']

ちゃんと型が絞られています。1年前のわたしが見たら泣いてしまいます。
filterによって苦労しなくていいんです、asやisを使用しなくていいんです🥺

asやisはコードが長くなるだけでなく、危険性があるらしい。
危険性が気になる方はこちらから

TypeScriptに革命が起きる

TypeScriptのリポジトリに投稿されたPull Requestにこんな投稿を見つけました。
https://github.com/microsoft/TypeScript/pull/57465

このPR(Pull Request)により、コード内でisを記述しなくても補完してくれるようになるようです。

このPRがもたらす効果は絶大で、2017年, TypeScript 2.3の頃から存在している問題を修正することになります。
https://github.com/microsoft/TypeScript/issues/16069

これが、filterを使用して要素を絞っても型が絞られない問題を報告したIssueです。
上記PRはすでにマージされており、該当Issueもクローズされています。

最後に

本当に嬉しいです、これは革命です。

もっと色んな人に知って欲しいので、もし良ければいいねをよろしくお願いします！