【Typescript】いろいろな型の指定方法：React・Recoil編

環境

• 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
• Recoil 0.5.2
• VsCode
• gitbash 2.32.0.1

Hooks

useState

• useStateの型定義は、useStateを宣言時に指定
• ジェネリック型<S>を用いて型を指定する
  

  function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

• stateの初期値から型が明確であれば型推論によって型を推測してくれるので指定しなくてもOK

type POST = typeof postData

const Home = () => {
  const [posts, setPosts] = useState<POST[]>([]) // POST型のオブジェクトの配列
  const [isShow, setIsShow] = useState(false) // 型推論
..

useCallback

• 引数に型指定が必要(指定しないと、anyになる)
  

  const computeBmi = useCallback(
    (weight: number, height: number) => { // here !!
      const bmi = weight / (height * 2)
      return bmi
    },
    [weight, height]
  )

useMemo

• useMemoフックに渡される関数の戻り値から推論できるので特に指定不要
  

  // someThingMemoizedValueの型はsomeThingFunctionの返り値の型から推論できる
  const someThingMemoizedValue = useMemo(() => someThingFunction(), [])

useEffect

• 第一引数の関数は、戻り値がundefined(戻り値なし)かクリーンアップ関数のため、型の指定は不要

コンポーネント

関数コンポーネント

• React.VFC(Void Function Component)を使用する
• VFCには、propsにchildren(ラップする子要素)が含まれないので、childrenが必要な場合はPropsに明示的に指定する
• React.VoidFunctionComponent<P>のPはジェネリック型のPropsなので、<P>の部分にPropsの型を指定すればOK

import..
type Props = {
  ..
  children: ReactNode // here !!
}

const BasicLink: React.VFC<Props> = (
  ( { href, name, className, children } ) => {
    return (
      <a href={href}>{children}</a>
    )
  },
)

export default ..

children

• ReactNodeでOK

import React, { ReactNode } from 'react'
import styled from 'styled-components'

type Props = {
  className: string
  children: ReactNode
}

const Container = styled.div``

const BasicContainer = (props: Props) => {
  const { children, className } = props
  return <Container className={className}>{children}</Container>
}

export default React.memo(BasicContainer)

イベントハンドラ / イベントオブジェクト

• onClickやonChangeなどのイベントハンドラ、イベントオブジェクト（event）の型定義
  

  const inputEmail = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => { // here
      setEmail(event.target.value)
    },
    [email]
  )

• イベントハンドラごとに型が異なるので、エディターでハンドラ名にホバーさせて確認する等の工夫が必要...(VsCodeで検証)

  

  

Recoil

• state(Recoilのatom)についても、基本的にはReactのuseStateと同じように呼び出し側で宣言時に指定する

import { atom } from 'recoil'
import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

export interface IUserState {
  id?: number
  name: string
  email: string
  isSignedIn: boolean
}

export const userState = atom({
  key: 'user',
  default: {
  id: null,
  name: '',
  email: '',
  isSignedIn: false
},
  effects_UNSTABLE: [persistAtom]
})

• 使う側

import { IUserState, userState } from 'components/store/atom/auth'
import { AxiosRequestConfig, AxiosResponse } from 'axios'
import userData from '../../../../types/user/user.json'

type USER = typeof userData

export const useHandleLogin: () => void = () => {
  const [user, setUser] = useRecoilState<IUserState>(userState) // here
  ..

まとめ

いかがでしたでしょうか。本記事では、Reactを用いてAxiosの基本的な知識と使い方を説明しています。モダンフロントエンド開発を行う上でいずれも必須の技術となってきますので、ぜひこの記事を参考にしてみてください