ESLint A && B, A || C が no-unused-expressions のエラーになる

TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ

ESLint no-unused-expressions error が発生

const timerRef = useRef<number|null>(null);
// …
timerRef.current&& clearTimeout(timerRef.current);
// => ESLint error

A && Bをしている箇所で Expected an assignment or function call and instead saw an expression. eslint@typescript-eslint/no-unused-expressionsのエラーが発生した

no-unused-expressions のルールはデフォルトで理論演算子の短絡評価 (`A && B`, `A || B`) を許可していない

allowShortCircuit set to true will allow you to use short circuit evaluations in your expressions (Default: false).
cf. no-unused-expressions - ESLint - Pluggable JavaScript Linter

なぜ no-unused-expressions エラーが発生するのか

This rule aims to eliminate unused expressions which have no effect on the state of the program.
cf. no-unused-expressions - ESLint - Pluggable JavaScript Linter

no-unused-expressionsのルールは未使用の式 (Expression) があるとエラーになる
式は結果を返すものなので、結果が使われてない( = 変数に代入されてない)とエラーになる

A && Bのような短絡評価は式なので、Aなら Bを実行するような記述でも、式の結果が使われてないという判断でエラーになるっぽい

timerRef.current&& clearTimeout(timerRef.current);
// => ESLint no-unused-expressions errorconst a = timerRef.current&& clearTimeout(timerRef.current);
// => OK 結果を変数に代入していれば no-unused-expressions のエラーは発生しない

解決方法01: 短絡評価を使わず if 文を使う

const timerRef = useRef<number|null>(null);
// …
timerRef.current&& clearTimeout(timerRef.current);
// => ESLint error

👇️

const timerRef = useRef<number|null>(null);
// …if ( timerRef.current ) {clearTimeout(timerRef.current);
}// => OK

解決方法02: ESLint no-unused-expressions のオプション allowShortCircuit を `true`に変更する

eslintrc.cjs

"rules": ["@typescript-eslint/no-unused-expressions": ["error", {"allowShortCircuit": true},
    ],
]

📝 allowTernary オプションで代入のない三項演算子を許可する

三項演算子もデフォルトでは許可されていないので、許可する場合は allowTernaryオプションを trueにする eslintrc.cjs

"rules": ["@typescript-eslint/no-unused-expressions": ["error", {// A && B, A || C を許可"allowShortCircuit": true// 三項演算子を許可"allowTernary": true,
      },
    ],
]