問題の詳細:
ReactのLoginPageコンポーネントで、Axiosを用いたPOSTリクエストを実装しています。VSCode上では正常に動作しているのですが、ESLintの実行時に下記のようなエラーが発生します。エラーは、型の安全性に関連しているようです。
エラーメッセージ:
状況:
npm run lintを実行した際に、上記のESLintエラーが表示されます。
@typescript-eslint/no-unsafe-assignmentや@typescript-eslint/no-unsafe-callといった型安全性に関するルールで引っかかっているようです。
使用しているのはaxiosのPOSTリクエストで、APIからのレスポンスを型安全に扱おうとしていますが、うまくいきません。
試したこと:
AxiosErrorやAxiosResponseなどを使用して、型の安全性を確保しようとしましたが、エラーが解消されません。
エラー箇所において、型アサーションや例外処理などを試しましたが、ESLintの警告を取り除くことができません。
コードの該当箇所:
修正版：ヘディングのテキストコードの該当箇所:
import { Typography } from '@material-tailwind/react';
import axios, { AxiosResponse } from 'axios'; // AxiosErrorを追加
import React, { useState } from 'react';
import InputCheckboxComponent from '@/components/atoms/input_checkbox';
import InputTextComponent from '@/components/atoms/input_text';
import LinkComponent from '@/components/atoms/link';
import FormCard from '@/components/molecules/formCard';
import DefaultComponent from '@/components/templates/default';
// import { LoginResponse } from './type';
// LoginResponse型の定義
interface LoginResponse {
authorization?: {
token: string;
};
}
// 環境変数の型定義
declare const process: {
env: {
REACT_APP_API_URL?: string;
};
};
export default function LoginPage() {
const [email, setEmail] = useState<string>('');
const API_URL = process.env.REACT_APP_API_URL;
if (!API_URL) {
throw new Error('API URL is not defined in the environment variables');
}
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const password = formData.get('password');
if (typeof password === 'string') {
const data = { email, password };
console.log(data);
try {
const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
headers: { 'Content-Type': 'application/json' },
});
if (response.data && 'authorization' in response.data && response.data.authorization) {
const token: string = response.data.authorization.token;
console.log('Token:', token);
} else {
console.error('Invalid response structure');
}
} catch (error) {
if (axios.isAxiosError(error)) {
console.error('Axios error:', error.response?.data ?? 'No response data');
} else if (error instanceof Error) {
console.error('Unexpected error:', error.message);
} else {
console.error('An unknown error occurred');
}
}
} else {
console.error('Password is not valid');
}
};
質問:
このエラーはどのように対処すればよいのでしょうか？
axios.isAxiosErrorを使った型ガードや例外処理は正しく記述されていると思われますが、ESLintでエラーが発生する理由がわかりません。
TypeScriptとAxiosを使って型安全なリクエストを行う際に、ESLintの警告を回避する最適な方法についてアドバイスをいただけると助かります。
環境情報:
Node.jsバージョン: v20.16.0
npmバージョン:10.8.1
ESLintバージョン: v8.57.0
TypeScriptバージョン: Version 5.5.3
axiosバージョン: axios@1.7.7
reactバージョン:@material-tailwind/react@2.1.9
│ └─ react@18.2.0
└─ react@18.3.1
Q&A
ベストアンサー
