🤖

typescript-eslint の ts-ban-comment を誤魔化す最悪な方法

2022/09/21に公開

typescript-eslint には ts-ban-comment というルールがあります。

このルールは // @ts-ignore// @ts-expect-error など TypeScript コンパイラが出すエラーを抑制するためのコメントを禁止したり、使用に制限をかけたりするためのものです。

https://typescript-eslint.io/rules/ban-ts-comment/

デフォルトの動作では、@ts-ignore よりも @ts-expect-error が推奨されることに加えて、最低 3 文字の説明コメントをつけることが求められます。

// 🙅‍♂️ invalid
// @ts-ignore
"foo".bar();

// 🙅‍♂️ invalid
// @ts-expect-error
"foo".bar();

// 🙆‍♂️ valid (@ts-expect-error のあとに続けて説明を書く必要がある)
// @ts-expect-error どうしても "foo" から bar() が呼びたいんです
"foo".bar();

ただ、この説明を書くのが面倒なことがありますよね。

いい感じに誤魔化す最悪な方法をご紹介します。

Emoji をひとつ置くだけです。

// 🙆‍♂️ valid
// @ts-expect-error 👨‍👩‍👧‍👦
"foo".bar();

こうすると ts-ban-comment ルールは警告してこなくなります。

もちろん通常の文字ではだめです(通常の文字ってなんやねんというのはあるが)。通常、説明は 3 文字以上必要だからです。

// 🙅‍♂️ invalid
// @ts-expect-error a
"foo".bar();

これが起こる理由は単純で、ts-ban-comment は説明文の長さを String.prototype.length で判定しているからです。

"👨‍👩‍👧‍👦".length は 11 なのですり抜けてしまうんですねえ。

以前は Prettier に関連するバグで似たような記事を書いたので詳細に興味がある人はそちらにも目を通してもらえるとよいかと思います。

https://zenn.dev/sosukesuzuki/articles/d21d69a5914a03

ただ、実際にはこんなことをしてはいけません。普通に意味のある説明を書きましょう。

バグだと思うので報告しました。

https://github.com/typescript-eslint/typescript-eslint/issues/5678

Discussion