本題
こんな感じで、returnを忘れた時もfilterは空のarrayを返すので、returnを忘れたことが分かりづらいです。
const a = ['b'];
const b = a.filter((e)=>{
true
});
console.log(b) // []
なので、こんな感じで、戻り値の型を指定するとTypeScriptではエラーが発生するのでわかりやすくなります
const a = ['b'];
const b = a.filter((e: string): boolean => {
true;
});
console.log(b)
↓Playgroundでエラーの出ている様子
ただ、片っ端から、booleanを指定していくわけにもいかないと思うんですよね。
↓のようにそもそも{}がないコードにbooleanを付けると冗長です。
const b = ['b'].filter((e): boolean =>
true
);
でも、自分がreturnをつけ忘れたところは、最初アロー関数で書いてたところを、2行以上コードを書くことになったので、{}をつけて、やっぱり1行に戻そうとなったところです。
このケースの時は、そもそもアロー関数の場合でも、booleanをつけておけば防げたわけですが、慣れてる人にとっては逆に可読性が落ちそうですね。。。
CursorでClaude 3.5 Sonnetに聞いてみた
的確に問題点を指摘してくれます。これでもいいような気がします。
結論
はちょっと出なかったですが、とりあえず、まずは何でもCursorに聞いてみようという癖はつけようかなと思いました。
おまけ
さらに冗長に型を指定する
const a = ['b'];
const callbackFn: (e: string) => boolean = (e)=>{
true;
};
const b = a.filter(callbackFn);
console.log(b)
↓Playgroundでエラーの出ている様子
dartと比べてみた
typescriptとdartをよく比べることがあるんですが、dartだと↓のような感じで警告が出ます。
ドキュメントを見る感じだと、コールバックの関数の戻り値がちゃんとboolと決まってるからみたいですね。↓
TypeScriptは↓だと思われます。 コールバック関数の戻り値がunknownで規定されてるんですね。
Discussion