ビルド時にtypescript-eslint/no-unsafe-returnエラーが発生した際の解決策

はじめに

React & TypeScript で開発をしている際に、コード上ではエラーが出ていないのに、ビルド時にtypescript-eslint/no-unsafe-returnエラーが出て、ビルドが通らない状況が発生しました。

この記事では、そのエラーの解決策を記述します。

エラー内容

ビルドが通らないコード

下記のコードが、ビルド時にエラーとなるコードです。
ソースコード上では型推論が効いており、エラーが出ていません。

const testData = useMemo(
  () => [
    { x: 0, y: 0 },
    { x: 1, y: 1 },
    { x: 1, y: 0 },
    { x: 0, y: 1 },
  ],
  []
);

// y座標でソートし、y座標が同じ場合はx座標でソートする
const sortedData = useMemo(() => {
  const sortedTestData = [...testData].sort((a, b) => {
    const yDiff = a.y - b.y;
    const xDiff = a.x - b.x;
    if (yDiff === 0) {
      return xDiff;
    }
    return yDiff; // Error: Unsafe return of an `any` typed value
  });

  return sortedTestData;
}, [testData]);

エラーメッセージ

Failed to compile.

src\components\Test\index.tsx
  Line 93:7:  Unsafe return of an `any` typed value  @typescript-eslint/no-unsafe-return

Search for the keywords to learn more about each error.

解決策

その 1

明示的に型を指定することで、エラーを解消できます。

- const yDiff = a.y - b.y;
- const xDiff = a.x - b.x;
+ const yDiff: number = a.y - b.y;
+ const xDiff: number = a.x - b.x;

その 2

yDiffの値をそのまま返すのではなく、条件分岐を行い、1か-1を返すようにすることで、エラーを解消できます。

- return yDiff;
+ return yDiff > 0 ? 1 : -1;

どちらが良いか？

どちらの方法でもエラーを解消できますが、その 1の方法の方が不要なコードが増えないため、良いと思います。

まとめ

typescript-eslint/no-unsafe-returnエラーが発生した際の解決策を記述しました。