【TypeScript】interfaceを禁止してtypeを使うeslintのカスタムルールを作ってみた

はじめに

typeとinterfaceの使い分けで、一部の例外を除いて、できるだけtypeを使うべきというコーディングスタイルを定めてみました。
eslint-typescriptにはprefer-function-typeというルールはあるけれど、その逆はないので、カスタムルールを作ってみました。

TL;DR

'no-restricted-syntax': [
  2,
  {
    selector: 'TSInterfaceDeclaration',
    message: 'Prefer types to interfaces.'
  }
]

typeとinterfaceの使い分けについて

古めの記事だと、interfaceを優先するような記述が見られるが、最近ではそうでもなさそうです！
(昔はtypeでできることが少なかったけれど、最近はtypeの機能が増えたという歴史的経緯が関係していそう)

調べたところ、interfaceはあくまでもclassの型を定義するもの、typeはobjectの型を定義するもののようです。
classの使用頻度にもよりますが、ライブラリを開発しているのでなければ、多くの場所でtypeを使うというコーディングスタイルも考えられるのではないでしょうか。

しかし、eslint-typescriptには、prefer-function-typeというルールはありますが、その逆は現状ありません。

eslintのカスタムルールを作ってみる

no-restricted-syntaxを使うことで、interfaceを禁止するルールを作ってみます。
interfaceの宣言に相当するselectorがわかればカスタムルールを設定できそうなので、typescript-eslint/parserを調べに行きます。
こちらのファイルにTSInterfaceDeclarationというそれっぽい名前があるので、それを使い、

'no-restricted-syntax': [
  2,
  {
    selector: 'TSInterfaceDeclaration',
    message: 'Prefer types to interfaces.'
  }
]

上記のようにeslintの設定に書き加えると、想定通りの動きをしてくれました！

参考記事

https://github.com/typescript-eslint/typescript-eslint/issues/433 https://jp.quora.com/TypeScript%E4%BD%BF%E3%81%84%E3%81%AB%E8%B3%AA%E5%95%8F%E3%81%A7%E3%81%99-Interface%E3%81%A8Type%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%AF%E3%81%A9%E3%81%86%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99