Typescript + React + Jikan API で練習プロジェクト

Jikan API(public API)を使ってTypescriptを勉強します。

基本は検索機能を使ってAnime Objectを取得します。
検索はカスタムフックを作ります。(importは省略してます。)

export default function useSearchAnime(query: string, numberToReturn: number): basicAnimeInfo[] {
    const [baiList, setBaiList] = useState<basicAnimeInfo[]>([]);

    let baseURL = `https://api.jikan.moe/v3`
    let url = `${baseURL}/search/anime?q=${query}&page=1`

    useEffect(() => {
        const result = async () => {
            let response = await axios({url: url, method: 'get'});
            let tmpBaiList: basicAnimeInfo[] = []
            for (let i = 0; i < response.data["results"].length; i++) {
                const element: any = response.data["results"][i];
                let baiEle: basicAnimeInfo = {
                    image: element["image_url"],
                    title: element["title"],
                    malid: element["mal_id"]
                };
                tmpBaiList = [...tmpBaiList, baiEle]
            }
            tmpBaiList = tmpBaiList.slice(0, numberToReturn < tmpBaiList.length ? numberToReturn : tmpBaiList.length)
            setBaiList(tmpBaiList)
        }
        if (query.length >= 3) { result() } else { console.log("query is too short!") };
    }, [query])

    return baiList;
}

export interface basicAnimeInfo {
    image: string;
    title: string;
    malid: number;
}

Jikan APIで使われているAnime Objectの情報すべては多すぎるので基本情報のみのinterfaceを自分で作ってそれを使用しました。

次に検索の結果として得られたAnime Objectのidを利用してより詳細な情報を取得するカスタムフックも作りましたがたいしたことではないのでここには載せません。

さらに、人気アニメのランキングを取得してそれらのAnime Objectを以下のinterfaceを使って処理します。

export interface topBasicAnimeInfo extends basicAnimeInfo {
    rank: number;
}

これで基本情報に加えてランキングの順位も保存されます。