TypeScriptのオーバーロード関数がESLintに怒られないようにする

3629 ワード
TypeScript ESLint tech テキストリンク

関数のオーバーロードとは

例はちょっとイマイチだがこんな感じで、引数によって戻り値の型を変えたりできる。

function calc(props: {a: number, b: undefined}): undefined
function calc(props: {a: number, b: number}): number
function calc(props: {a: number, b?: number }}) {
  // 
}

しかし、ESLintを入れていて、eslint:recommendedをextendsしてる場合、エラーが出る

Error: 'props' is defined but never used.  no-unused-vars
Error: 'calc' is already defined.  no-redeclare
Error: 'props' is defined but never used.  no-unused-vars
Error: 'calc' is already defined.  no-redeclare

ESLintのエラーを回避する

  1. TSLintのparserとeslint-pluginを入れる
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
  1. .eslintrcにplugin:@typescript-eslint/recommendedを追加する
{
  "extends": [
    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
  ]
}

解説

関数のオーバーロード自体がJavaScriptにはない機能なので、ESLintのruleには存在せず、TSLintを使わないといけないっぽい？
なので、TSLintのプラグインである@typescript-eslint/eslint-pluginとパーサーである@typescript-eslint/parserを入れて、ESLintでTSLintのruleを使えるようにしてあげたあと、plugin:@typescript-eslint/recommendedを追加して解決している。
具体的にどのルールが解決してくれたかはちょっと調べていないが、この際なのでrecommendedで入れておいた方がいいだろうと判断した。
TSLintがdeprecatedになって、全部ESLintでいけると思ってたのでちょっとびっくりした。

バケツリレーについて考える
Next.js + VS Code のデバッグ時にブレークポイントがとまらないときの対応方法