前書き

airbnbを使ってeslintを使っていると、typescriptでパラメータプロパティが使えない(エラーが出る)。
それを回避できないか調べたところ、普通に存在していたので、それのメモ。

パラメータプロパティとは

コンストラクタの引数でクラスプロパティを宣言できる。

class Params {
  constructor(
    public readonly x: number,
    protected y: number,
    private z: number
  ) {
    // No body necessary
  }
}

// 上と下のコードは同一コード。

// class Params {
//   public readonly x: number;
//   protected y: number;
//   private z: number;

// constructor(
//     readonly x: number,
//     y: number,
//     z: number
//   ) {
//     this.x = x;
//     this.y = y;
//     this.z = z;
//   }
// }

上記コードはサイトに載っていたコードの引用。
これを見て分かる通り、xやyなどのクラスプロパティを用意しなくても、コンストラクタの引数でpublicやprivateなどの修飾子を付けるだけでクラスプロパティを用意し、代入してくれるという優れもの。

他にもクラスプロパティを持っている場合や、クラスプロパティではない引数とセットで使う場合などは、可読性が下がってしまう時があるのだが、それ以外だとシンプルに使いやすいので使えるなら使いたい。

eslintではエラーが出る

若干語弊のある表題。正確には、以下のeslint設定だとエラーが出る。

    "no-useless-constructor": "error",

これは、中身が空などで意味のないコンストラクタを記述している場合にエラーが出るようになっている。

が、上記のParamsクラスも引数だけ設定して中身が空白なので、エラーが出る。
理由は単純で、javascript本体にはパラメータプロパティ記法が存在せず、eslint側では単に引数だけ受け取ったコードとして認識されるため。

Parameter properties trigger no-useless-constructor · Issue #546 · eslint/typescript-eslint-parser

typescriptだとクラスプロパティ宣言も兼ねてるかなり必要なコードなので、このエラーは意図しないものになる。是非とも回避したい。

@typescript-eslintを使う

@typescript-eslint/no-useless-constructor

@typescript-eslint/no-useless-constructorは、no-useless-constructorと同じく意味のないコンストラクタはエラーが出るが、こちらはクラスプロパティに対応していて、上記のParamsクラスでもエラーが出ないようになる。

no-useless-constructor | typescript-eslint

また、no-useless-constructorをoffにしないとこれがエラーを出してくるので、同時にoffにする。

  "overrides": [
    {
      "files": ["**/*.ts"],
      "rules": {
        "no-useless-constructor": "off",
        "@typescript-eslint/no-useless-constructor": "error"
      }
    }
  ]

rulesの中でも良いが、jsと混在するならtsにだけ影響させたほうが良さそう。

これで終わりかと思いきや、実はエラー自体は解消しきれていない。
Unexpected empty constructor.というエラーが表示される。(※上のParamsはコメントがあるのでエラーが出ないが、消せば出る)
ということでこれも同じく解消する。

@typescript-eslint/no-empty-function

@typescript-eslint/no-empty-functionを使うことで、パラメータプロパティ専用のコンストラクタでエラーが出なくなる。

no-empty-function | typescript-eslint

先ほどと同様に、no-empty-functionを無効にして、こちらをセットする。

  "overrides": [
    {
      "files": ["**/*.ts"],
      "rules": {
        "no-useless-constructor": "off",
        "@typescript-eslint/no-useless-constructor": "error",
        "no-empty-function": "off", // 追加
        "@typescript-eslint/no-empty-function": "error" // 追加
      }
    }
  ]

これで、エラーを気にせずにパラメータプロパティを記述できるようになった。めでたしめでたし。

終わりに

最近のeslintの初期設定でairbnbを設定出来なくなったし、設定していてもルールの上書き数が増えてきたので、そろそろ自分用にカスタマイズしたもの作りたい感。

【typescript】eslintでパラメータプロパティを許可する

前書き