React(TypeScript)の変数の書き方の不具合

Question

React(TypeScript)の書き方で質問があります。JavaScript、TypeScriptの素人です…。

ReactのページからDjangoで作成したトークンを入手し、ログインするページを作成しています。ページにはユーザー名とパスワードを入力するフォームがあり、ログインボタンを押すとトークンを取得しにいきます。認証に成功すると /test のページに遷移する仕組みにしています。以下のページを作成しました。

Login.tsx

import React, { useState, useEffect, useRef } from 'react';
import { useCookies } from 'react-cookie';
import axios from 'axios';
import { useForm } from "react-hook-form";
import  { useNavigate } from 'react-router-dom';

const apiURL = 'http://xxx.xxx.xxx.xxx/api/v1/';

export const Login = () => {
    const history = useNavigate();

    const [cookies, setCookie] = useCookies();
    const { register, handleSubmit, watch } = useForm();

    const getJwt = async (data) =>{
        console.log(data)
        await axios.post(`${apiURL}auth/jwt/create/`,
          {
            username: data.username,
            password: data.password,
          },
        )
        .then(function (response) {
          console.log(response.data.access)
          setCookie('accesstoken', response.data.access, { path: '/test' },);
          setCookie('refreshtoken', response.data.refresh, { path: '/test' },);
          history('/test');
        })
        .catch(err => {
            console.log("miss");
            alert("usernameかpasswordが違います");
        });
      };

    return (
        <div className="top-wrapper">
          <div className="login">
            <h3>Login</h3>
          </div>
          <div className="login-block">
            <form onSubmit={handleSubmit(getJwt)}>
              <label htmlFor="username">Username: </label>
              <input className='form-control' {...register('username')} />
              <label htmlFor="password">PassWord: </label>
              <input className='form-control' type="password" {...register('password', { required: true })} />
              <input className='btn btn-secondary' type="submit" value="ログイン" />
            </form>
          </div>
        </div>
    );
}

npm run startコマンドを実行すると次のエラーが出力されます。

ERROR in src/components/pages/Login.tsx:15:27
TS7006: Parameter 'data' implicitly has an 'any' type.
    13 |     const { register, handleSubmit, watch } = useForm();
    14 |
  > 15 |     const getJwt = async (data) =>{
       |                           ^^^^
    16 |         console.log(data)
    17 |         await axios.post(`${apiURL}auth/jwt/create/`,
    18 |           {

ブラウザ側でもエラーのポップアップメッセージが出力されていますが、ポップアップを閉じて実際に使ってみると、トークン認証はできており画面遷移をします。何かの書き方がおかしいのだと思いますが、修正方法を教えていただけいないでしょうか。型を定義しないといけないと言われているように見えますが、書き方がわかりません。

Answer 1

async (data：any)とすることで解決しました。