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

公開日 2022年1月19日(水)

環境

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の基本的な知識と使い方を説明しています。モダンフロントエンド開発を行う上でいずれも必須の技術となってきますので、ぜひこの記事を参考にしてみてください