TSX のなかでジェネリクスを書くとき、<T>
の代わりに <T extends unknown>
と書くテクニックは有名ですよね
const f = <T>(n: T) => n; // <T> が JSX として認識されてコンパイルできない const g = <T extends unknown>(n: T) => n; // これは OK
しかし、 @typescript-eslint/no-unnecessary-type-constraint というリントルールを有効化していると、この書き方はエラーになります。まあ、extends unknown
は意味ないですから当然ですよね…
ではどうすれば良いかと言うと、<T, >
と書くと良いです。
const h = <T,>(n: T) => n; // <T,> は JSX として認識されないので OK
(この記事は sunnyone さんのツイートを参考にしています)
<T> はtsxだとelementになってしまうので、こう(むずかしい!)
— sunnyone (@_sunnyone) 2021年7月6日
a.filter(<T,>(n: T): n is NonNullable<T> => n != null);