【Typescript】いろいろな型の指定方法：Axios編

環境

• windows10
• DockerDesktop for Win 3.5.x
• node 16.13.1
• npm  8.1.2
• TypeScript 4.5
• React 17.0.1
• Next.js 12.0.7
• axios 0.24.0
• Recoil 0.5.2
• VsCode
• gitbash 2.32.0.1

Axiosの主な型

Config

AxiosRequestConfig

• urlとか、methodの情報が入ったConfing用の型

const options: AxiosRequestConfig = { // here
  url: '/api/login',
  method: 'POST',
  params: {
    email,
    password
  }
}

axios(options)
  .then((res: AxiosResponse<USER>) => {
    const user = res.data
  ..

レスポンス関連

AxiosResponse

• responseの型
• response.dataでJSONデータを取得することができる

AxiosPromise

• 非同期処理を行う際のresponseのデータ型
• AxiosPromiseはAxiosResponseを含むPromise Interfaseを継承したもの
  

  export interface AxiosPromise<T = any> extends Promise<AxiosResponse<T>> {
  }

• 以下のような非同期関数だと、async内でawaitでいったんAxiosResponseとしてresponseを受けているが、Axiosを使用することで、最終的にはPromise型のデータを返してくれる。
  

  import ....
  
  type POST = typeof postData
  type FetchPosts = () => AxiosPromise<POST[]>
  
  export const useFetchPosts = () => {
    const fetchPosts: FetchPosts = async () => {
      try {
          const res: AxiosResponse<POST[]> = await axios(options) // GET
          return res // AxiosResponse -> AxiosPromise
        } catch (error) {
          ..
        }
      }
      return {
        fetchPosts
      }
  }

• 呼び出す側では、単にawaitで非同期関数の結果(Promise)をAxiosResoponseとして受けるだけでOK
  

  import ....
  
  type POST = typeof postData
  
  const Home = () => {
    const [posts, setPosts] = useState<POST[]>([])
    const { fetchPosts } = useFetchPosts()
  
    useEffect(() => {
      (async () => {
        const posts: AxiosResponse<POST[]> = await fetchPosts()
        if (posts.data.length === 0) {
          return
        }
        setPosts(posts.data)
      })()
    }, [])
    ..

AxiosError

• 404とか500などのレスポンスエラーの型

axios(options)
  .then((res: AxiosResponse<USER>) => {
    const user = res.data
    ....割愛
  .catch((error: AxiosError) => {
  ..
})

以上です。

node_modules/axios/index.d.ts を見ているとほかにもいろいろな型定義がありますが、おおむね上記あたりをおさえておけばスムーズに実装できるのではないかと思います

まとめ

いかがでしたでしょうか。本記事ではTypescriptにおけるいろいろな型の指定方法について紹介しています。本記事では、Axiosという外部リソースを操作するためのライブラリの型定義について説明しています。