🙌

【Eslint】コンポーネントの型指定がチェックされない

2023/06/30に公開

React

TypeScript

ESLint

tech

概要

eslint を導入することで、コンポーネントの型が指定されていない場合に以下のようなエラーを出力してくれます。

既存プロジェクトの型チェックエラー

Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types

export const ExampleComponent = () => {

export const ExampleComponent = (): JSX.Element => {

しかし新規のプロジェクトへ導入した際にエラーを出力してくれず、詰まったので解消方法をまとめました。

結論

以下のルールを追加すれば OK

.eslintrc.cjs

module.exports = {
    rules: {
        "@typescript-eslint/explicit-module-boundary-types": "error",
    },
}

調査の過程(雑メモ)

別プロジェクトのエラーに表示されているリンク先へ飛んでみる。

typescript-eslint というライブラリのページへ遷移。
エラーを検知してくれるのはこのライブラリらしい。

リポジトリから公式サイトへ飛んでみる。

.eslintrc.cjs も公式通りの設定になっていることを確認

.eslintrc.cjs

/* eslint-env node */
module.exports = {
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  root: true,
};

以下のコマンドを実行してみる

npx eslint .

出力結果

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.1.0

YOUR TYPESCRIPT VERSION: 5.1.3

Please only submit bug reports when using the officially supported version.

TypeScript のバージョンが最新版のため、ライブラリが対応していない？

ダウングレードしてみる

yarn upgrade typescript@5.0

Warning は解消されたが、エラーは出力されない

公式リポジトリ見てみる

型追加は追加のプラグインが必要らしい？

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ]
}

一番下を追加

error '__dirname' is not defined とかいうエラー

これを追加して解消

{
    "env": {
        "node": true
    }
}

しかし、これコンポーネントの型チェックをしているわけではなかった・・・
ちゃんと読め

rules に追加してみたら・・・動いた
他のプロジェクトでは追加しなくても動いていたのになぜ・・・？
バージョンによって違うのか、別の設定がどこかにされていたのか

rules: {
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/explicit-module-boundary-types": "error",
    },

反省

既存プロジェクトで動いているからと言って、そのまま書いても動かない
「それっぽいもの」をとりあえず追加する前に、マニュアルに書いてあることをちゃんと読め

GitHubで編集を提案

概要

結論

調査の過程(雑メモ)

反省

Discussion